0

I'm truing to use materialize css in my project. I load the selectable elements for my select item from the server side, and when data arrived I update the select control with this statement:

$("#surveyTypeId").material_select();

The generated list looks like it contains an additional empty element at the top of the list (the gray area on the image). enter image description here When I try to select an item, the option values seems to be shifted. I have the value of the "Classec Survey" item when I select the gray area, I have the value of "Referer Survey about Candidate" when I select "Classic Survey" on the UI.

The generated source is this:

<div class="input-field col s10 m10 l10 no-padding">
  <label for="surveyTypeId">Select survey type</label>
  <div class="select-wrapper select-material ng-pristine ng-untouched ng-invalid ng-invalid-required initialized">
  <span class="caret">▼</span>
  <input class="select-dropdown" readonly="true" 
   data-activates="select-options-995977c5-5d47-4511-fb6a-6a51cbc1cfb6" value="" 
   type="text">
    <ul style="width: 712px; position: absolute; top: 0px; left: 0px; opacity: 1; display: none;" id="select-options-995977c5-5d47-4511-fb6a-6a51cbc1cfb6" class="dropdown-content select-dropdown">
      <li class="active"><span></span></li>
      <li class=""><span>Classic Survey</span></li>
      <li class=""><span>Referrer Survey about Candidate</span></li>
      <li class=""><span>Project Manager Survey about Candidate</span></li>
    </ul>
    <select required="required" id="surveyTypeId" class="select-material 
     ng-untouched initialized ng-dirty ng-valid-parse ng-valid ng-valid-required" name="surveyTypeId" ng-model="survey.SurveyTypeId" ng-required="true">
       <!-- ngRepeat: wl in lookups.SurveyTypesLookupValues -->
       <option class="ng-binding ng-scope" ng-repeat="wl in lookups.SurveyTypesLookupValues" value="1">Classic Survey</option>
       <!-- end ngRepeat: wl in lookups.SurveyTypesLookupValues -->
       <option class="ng-binding ng-scope" ng-repeat="wl in lookups.SurveyTypesLookupValues" value="2">Referrer Survey about Candidate</option>
       <!-- end ngRepeat: wl in lookups.SurveyTypesLookupValues -->
       <option class="ng-binding ng-scope" ng-repeat="wl in lookups.SurveyTypesLookupValues" value="3">Project Manager Survey about Candidate</option><!-- end ngRepeat: wl in lookups.SurveyTypesLookupValues -->
     </select>
   </div>
</div>

As you can see I've got only 3 options in the original select control still.

Have you got any idea, why I have the empty item in the materialize generated list? Or how to get rid of that empty item? Or at least how to fix the shift in the values? Thanks.

SOLVED:

After double checking the angular generation, it turned out, that nitially an empty item is generated as you said. After that the angular update fixed that, but the materialize list generation still kept that item. (Although I did not understand why?) So really the root cause was angular. Thanks to @shashanka n for the idea.

Community
  • 1
  • 1
Csaba Benko
  • 1,101
  • 8
  • 15
  • This question is a duplicate of http://stackoverflow.com/questions/12654631/why-does-angularjs-include-an-empty-option-in-select – shashanka n Mar 08 '16 at 14:31
  • I don't think this is the same issue. The angular generated list contains only 3 elements in my case, as it should be. You can see only 3 `` inside the ` – Csaba Benko Mar 08 '16 at 14:43
  • @shashanka n: After double checking the angular generation, it turned out, that nitially an empty item is generated as you said. After that the angular update fixed that, but the materialize list generation still kept that item. (Although I did not understand why?) So really the root cause was angular. Thanks for the idea. – Csaba Benko Mar 08 '16 at 15:58

0 Answers0