Question

I have a HTML page using Jquery select option as given below..

<select id="select-stage" class="spinner" data-inline="true" >
    <option value="-1">-Select Stage-</option>
</select>

Now the contents of this select option are give dynamically by an ajax call result.

This is how it looks like

When I click the user option for the first time it is not getting selected. But whereas other options HOD1, HOD2, HOD3 etc. are getting selected properly. This only happens for the first time after load. If I select other options and then again select user it is getting selected.

It does not get selected only for the first time. I can’t spot the problem.

var option=[];
$.each(myData, function(key, val) {
    sessionStorage.setItem(trim(val),trim(key));
    option.push('<option value="' + trim(key) + '">' + trim(val) + '</option>');
});
$('#select-stage').html(option.join(''));
}

//changing values on user selection//
$('#select-stage').live('change',function(){
    stageId = sessionStorage.getItem($(this).find('option:selected').text());
    selecttext = $(this).find('option:selected').text();
    noselection = true;
    listStageselectedIndexChanged(selecttext);
});

Answer 1

This is because you are replacing the first item in the select – which is already selected, therefore the change event is never fired.

You need to keep the -Select Stage- option in there as the default and append the new options beneath it. Then when any other option is selected, the change event will be fired.

UPDATE

To achieve this modify your code to prepend the default option, like this:

var option=[];
$.each(myData, function(key, val) {
    sessionStorage.setItem(trim(val),trim(key));
    option.push('<option value="' + trim(key) + '">' + trim(val) + '</option>');
});
$('#select-stage')
    .html(option.join(''))
    .prepend('<option value="-1">-Select Stage-</option>')
    .val('-1');