Question

我已经能够删除并替换html选择列表中的所有选项（使用jQuery），但我无法从列表中进行选择。问题似乎与“on（'click'）”事件有关，但我不确定原因。有人可以帮忙吗？

$(document).on('click', '#selectId', function() {
    var option1 = $('<option></option>').attr("value", "option value").text("Text 1");
    var option2 = $('<option></option>').attr("value", "option value").text("Text 2");
    $("#selectId").children().remove().end().append(option1).append(option2);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div>
    <select name="name" id="selectId">
        <option>--- select ---</option>
        <option>1</option>
        <option>2</option>
    </select>
</div>
</body>

Answer 1

每次点击select元素时，您都会摧毁孩子并用两个选项替换它们。您可以从列表中进行选择，但由于您再次单击，该列表将再次销毁，并替换为两个全新的相同子项，默认情况下会选择第一个。你可以替换

$(document).on('click', '#selectId', function() {

与

$(document).ready(function() {

因此，更改只会在页面加载时发生，或者在时重新考虑您的逻辑，以替换选项（例如，不要在每次点击时执行此操作）

Answer 2

如果初始化必须动态完成，您可以将“on”替换为“one”（请参阅here），例如

$(document).one('click', '#selectId', function() {
    var option1 = $('<option></option>').attr("value", "option value").text("Text 1");
    var option2 = $('<option></option>').attr("value", "option value").text("Text 2");
    $("#selectId").children().remove().end().append(option1).append(option2);
});

应该触发事件处理程序不超过一次。

Answer 3

而不是单击使用更改事件处理程序

$(document).on('change', '#selectId', function() {
    var option1 = $('<option></option>').attr("value", "option value").text("Text 1");
    var option2 = $('<option></option>').attr("value", "option value").text("Text 2");
    $("#selectId").children().remove().end().append(option1).append(option2);
});

使用jQuery动态更改选择列表后选择选项

3 个答案: