Appending options to select element doesn't work - MaterializeCSS

Question

I want to update a select options according to date that the user picks. For that I tried using ajax request to get data and append the data received to a select element as options. There's nothing wrong with the json object that's received as I tried logging data to console and it gives the data I ant. But hen I try to append it to select element the options do not get appended.

JavaScript code

    $.ajax({
                type: 'GET',
                url: 'sessions',
                data: { date: date },
                success: function (data) {
                    var sessions = data['sessions'];
                    console.log(sessions);
                    $('select').html('');
                    $.each(sessions, function (i, session) {                            
                        $('select').append($('<option/>', { 
                            value: session[0],
                            text : session[1]
                        }));
                        console.log(i);
                        console.log(session[1]);
                    });
                   }
                });

html code

    <div class="row">
 <div id="sessionDiv" class="input-field"  style="padding:10px">
    <select class="black-text text-lighten-1" name="session" id="session" >
        <option  value="0" disabled selected>Choose your preferred session</option>
    </select>
    <label for="session" class="purple-text text-lighten-2"> Session :</label>
</div>

FYI: you're deleting all the options with `$('select').html('')` on every iteration ? — adeneo, Dec 11 '16 at 19:31
@adeneo Sorry about the mistake done in pasting and rearranging the code, It's before the $.each iterator and it still doesn't work — Achala Dissanayake, Dec 11 '16 at 20:07
And what does the console logs inside the `each` show, do they actually show the text for each option — adeneo, Dec 11 '16 at 20:10
@adeneo yes they do show what i need to be appended as options — Achala Dissanayake, Dec 11 '16 at 20:13
http://stackoverflow.com/questions/170986/what-is-the-best-way-to-add-options-to-a-select-from-an-array-with-jquery — boomcode, Dec 11 '16 at 20:16
@boomcode tried that method as well. Still doesn't work. I guess the problem somwhere else other than appending part as I tried several methods of appending and neither one of them worked — Achala Dissanayake, Dec 11 '16 at 20:35
As long as the data is in the correct format, it should work just fine -> https://jsfiddle.net/mxtut6kq/1/, you have to check your data more thoroughly — adeneo, Dec 11 '16 at 20:37

score 2 · Answer 1 · answered Dec 11 '16 at 20:58

function f1(){    $.ajax({
                type: 'GET',
                url: 'sessions',
                data: { date: date },
                success: function (data) {
                    var sessions = data['sessions'];
                    console.log(sessions);
                    $('select').html('');
                    $.each(sessions, function (i, session) {                            
                        $('select').append($('<option/>', { 
                            value: session[0],
                            text : session[1]
                        }));
                        console.log(i);
                        console.log(session[1]);
                    });
                  
                  
                  
                   }
                });
}

var data ={
  "sessions" : [{"value":"value 1","text":"Option 1"},
                {"value":"value 2","text":"Option 2"},
                {"value":"value 3","text":"Option 3"},
                {"value":"value 4","text":"Option 4"},
                {"value":"value 5","text":"Option 5"}]
}


function fillSelect(){
  
  var sessionList=data.sessions;
  $('#session12').empty();
  var msg='';
  console.log(sessionList.length);
  for(i=0;i<sessionList.length;i++){
    var bean=sessionList[i];
    msg+='<option value="'+bean.value+'">'+bean.text+'</option>';
  }              
  $('#session12').html(msg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div id="sessionDiv" class="input-field"  style="padding:10px">
    <select class="black-text text-lighten-1" name="session" id="session12" >
        <option  value="0" disabled selected>Choose your preferred session</option>
    </select>
    <button type="button" onclick="fillSelect()"> click to fill</button>
    <label for="session" class="purple-text text-lighten-2"> Session :</label>
  </div>                                       
</div>

If response of async request you are getting in data is similar to what i have written in data variable in snippet then my way of generating the option will work just fine. If response you are getting is exactly same as i have shown in data(by that i mean structure of the variable) then you can simply replace all your code in ajax function with my code in fillSelect function

Hey, thank you for the response, it was not initializing select in materialize CSS. — Achala Dissanayake, Sep 17 '17 at 16:33

Appending options to select element doesn't work - MaterializeCSS

1 Answers1