jQuery IE9用Ajax重新填充选择选项

Question

以下代码可在非IE浏览器中完美运行。 请注意，这前三个选项是通过jQuery添加的。

<select id="mySelect" name="mySelect">
  <option value="1">MyVal1</option>
  <option value="2">MyVal2</option>
  <option value="3">MyVal3</option>
</select>

我清除了选项，以便可以添加新选项：

// my new values has the proper values of [{"Id": 4, "Text" : "MyVal4"}, {"Id": 5, "Text": "MyVal5"}]
$("#mySelect").empty();
for (var i = 0; i < myNewVals.length; i++) {            
  $("#mySelect").append('<option value="' + myNewVals[i].Id + '">' + myNewVals[i].Text + '</option');
}

它在我第一次尝试填充时起作用，但是此后每隔一段时间，它将使用相同的值重新填充下拉列表。 为什么在尝试重新制作选项时会忽略新值？

Answer 1

最好使用JSON数组，尝试这样的操作：

<script>
    $(document).ready(function () {
        var myNewVals = { 4: 'Myval4', 5: 'Myval5' };

        $("#popButton").bind('click', function (event) {

            $("#mySelect").empty(); 
            $.each(myNewVals, function(val, text) {
                $("#mySelect").append($('<option></option>').val(val).html(text))
            });
        });
    });
</script>

<select id="mySelect" name="mySelect">
    <option value="1">MyVal1</option>
    <option value="2">MyVal2</option>
    <option value="3">MyVal3</option>
</select>
<input type="button" id="popButton" value="Populate!" />

Answer 2

引起问题的原因是我试图从下拉列表中删除禁用的属性。 如果在两次填充之间将其禁用，它似乎可以正常工作。 非常愚蠢的错误。