jquery - 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

问题是因为我试图从下拉列表中删除禁用的属性。如果我在重新填充之间禁用它，它似乎可以工作。非常愚蠢的错误。