如何在JavaScript中删除下拉列表的未选择项目

Question

自一段时间以来，我一直在互联网上寻找这个问题。 我有一些水果的下拉列表。 从列表中选择一个项目后，其他项目应从列表中删除。 例如，如果选择了Apple，则应删除其他水果，而Apple仅应保留在列表中。 =>函数removeUnselectedOptions()执行不一致。 下面的代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Remove unselected items</title>
<script>
function removeUnselectedOptions() {
    var element = document.getElementById("fruitSelect");
    var length = element.length;
    var options = element.options;
    var selected = element.value;
    console.log(selected);
    console.log(length);
    var i = 0;
    do{
        console.log(i);
        console.log(options[i].value);
        console.log(selected);

        if(options[i].value != selected) {
            element.remove(i);
}
        i++;
   } while (i<length);
}
</script>
</head>

<body>
<form>

<br>
<select id="fruitSelect" size="5" onchange='removeUnselectedOptions();'>
    <option selected value="Select a fruit" >Select a fruit</option>
    <option>Apple</option>
    <option>Pear</option>
    <option>Banana</option>
    <option>Orange</option>
    </select>
    </form>
<br>
</body>
</html>

Answer 1

您可以将代码简化为以下代码，以获取所选元素的索引，然后向后循环以将其删除。 为什么倒退？ 因为如果您向前循环（通常会这样做），则删除元素时索引会发生变化，并且最终会留下您可能注意到的选项。

 function removeUnselectedOptions() { var element = document.getElementById("fruitSelect"); var selected = element.selectedIndex; for (var i = element.length-1; i >= 0; i--) { if (i != selected) element[i].remove() } }

 <form> <br> <select id="fruitSelect" size="5" onchange='removeUnselectedOptions();'> <option selected value="Select a fruit">Select a fruit</option> <option>Apple</option> <option>Pear</option> <option>Banana</option> <option>Orange</option> </select> </form>

Answer 2

其他方式是：

function removeUnselectedOptions(){
    var element = document.getElementById("fruitSelect");
    var options = element.options;
    var i = 0;
    while (i < element.length){
        if(options[i].selected) {
            element.innerHTML = '<option value="'+options[i].label+'">'+
                options[i].label+
                '</option>';
            break;
        }
        i++;
    }
}

jsfiddle示例

如何在JavaScript中删除下拉列表的未选择项目

问题描述

2 个解决方案

解决方案1
2 已采纳 2015-11-26 17:32:34

解决方案2
0 2015-11-26 17:56:56

如何在JavaScript中删除下拉列表的未选择项目

问题描述

2 个解决方案

解决方案1 2 已采纳 2015-11-26 17:32:34

解决方案2 0 2015-11-26 17:56:56

解决方案1
2 已采纳 2015-11-26 17:32:34

解决方案2
0 2015-11-26 17:56:56