选择动态选择中的第一个选项而不触发附加事件

Question

我有一个使用Jquery select选项的HTML页面，如下所示..

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

现在，这个select选项的内容由ajax调用结果动态提供。

这就是它的样子

我现在的问题：

现在我的问题是我第一次点击user选项时没有被选中。但是其他选项HOD1，HOD2，HOD3等正在被正确选中。

此问题仅在加载后第一次发生。如果我选择其他选项，然后再次选择user，它就会被选中。

它不会仅首次被选中。我无法发现问题。

有人可以为此提供帮助吗？

设置选项的代码：

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

这是因为您要替换已经选中的select中的第一项，因此永远不会触发更改事件。

您需要将-Select Stage-选项保留为默认值，并在其下方附加新选项。然后，当选择任何其他选项时，将触发change事件。

更新

要实现此目的，请修改代码以添加默认选项，如下所示：

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');