javascript - 单击选择下拉列表时添加另一个选项？

Question

当他们点击时，我需要在 HTML 中添加一个新的选择选项

<select class="statusButtonChange statusButton " data-value="49506">
    <option value="0" selected=""></option>
    <option value="1">Close</option>
    <option value="2" disabled="" style="color:grey;">Taken</option>
</select>

这个新选项是动态的，将来自 API 响应...我正在解析 API 响应中的 var 值，但现在，我将其设为静态只是为了测试。

现在，我有这个:

$(document).ready(function () {
    var k = 1
    $(".statusButton").on('focus', function () {
        var value = "Disable";
        var new_v = "";
        var html = $(".statusButton").html();

        if (k == 1) {
            if (value == "Disable") {
                new_v = "<option value='Disable' >Disable</option>";
            }
            else if (value == "Enable") {
                new_v = "<option value='Enable' >Enable</option>"
            }
            var full = html + "" + new_v;
            $(".statusButton").html(full);
            k = 2;
        }
    });
});

它正在 JSFiddle 上运行，但是当我尝试将它集成到我的网站上时，它不会读取它，甚至只是读取控制台日志。我究竟做错了什么？

Answer 1

我不确定到底出了什么问题，但我认为更好的方法可能是使用 jQuery 的追加方法( https://api.jquery.com/append/ )。

考虑:

...
$(".statusButton").on('focus', function () {
    var value = "Disable";
    var new_v = "";
    var $statusButton = $(".statusButton");
    if(k == 1){
        if(value == "Disable")
        {
            $statusButton.append("<option value='Disable' >Disable</option>");
        }
        else if(value == "Enable")
       {
           $statusButton.append("<option value='Enable' >Enable</option>")
       }
...

如果您这样做，则不必再进行任何额外的 .html 调用。