Question

我似乎无法弄清楚这一点。

我的函数应该工作，但是有一个差异，当从输入框动态添加选项值，并且我点击[list1]中的删除键时，它们不会被删除。但是，如果选项值是静态添加的，那么它们就可以正常删除。有什么想法吗？

我真的为此苦苦挣扎。

<!DOCTYPE html>

<html>

<head>
<script type="text/javascript">

function add_refdoc() {

    var x = document.getElementById("list1");

    var option = document.createElement("option");

    var input = document.getElementById('refdocs_input')

    option.text = input.value

    x.add(option,x.option)

    x.selectedIndex = x.options.length - 1;
}


function del_refdoc(e) {
    var evt = e ? e : event;
    var sel = evt.target ? evt.target : evt.srcElement;
    if(evt.keyCode && evt.keyCode == 46 || evt.which == 46) {
        var val = sel.value;
        var opts = sel.getElementsByTagName("option");
        if(val != "") {
            for(var i=0; i<opts.length; i++) {
                if(val == opts[i].value)
                    sel.removeChild(opts[i]);
                }
        }
    }
}

</script>


</head>

<body>
<input id="refdocs_input" type="text"/>

<input value="add" type="button" onclick="add_refdoc()"/>

<br>
<select onkeydown="del_refdoc(event)" style="width: 250px;" id="list1"></select>

<br><br>

<select onkeydown="del_refdoc(event)" style="width: 250px;" id="list2">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

</body>

</html>

Answer 1

看起来这是添加选项值的方式

所以我改变了这段代码并且有效。

function add_refdoc() {

    var s = document.getElementById('list1')

    var t = document.getElementById('input1').value

    s.options[s.options.length] = new Option(t, t)

}

动态添加选项框的选项不会删除

1 个答案: