根据 First using Javascript 中的选择从第二个下拉列表中删除项目答案

【问题标题】：Remove item from second dropdown based on selection in First using Javascript根据 First using Javascript 中的选择从第二个下拉列表中删除项目
【发布时间】：2013-04-10 08:01:14
【问题描述】：

我有四个下拉列表，我正在手动填充它们。

现在我想添加一个 javacsript，当我选择第一个下拉选项时，然后在第二个第三个第四个下拉列表中，可以删除该项目或选项。

第二个第三个和第四个等同样的流程。

我正在提供我的代码，但到目前为止，它还不能正常工作。

我只关注第一个阶梯，即选择第一个选项时，然后从第二个、第三个和第四个下拉菜单中删除项目。

 function RemoveItems(){
     var List1 = document.getElementById("ddlSortField");
     var sortList1 = List1.options[List1.selectedIndex].text;

     var List2 = document.getElementById("ddlSortField2");
     var sortList2 = List2.options[List2.selectedIndex].text;
     List2.options.remove(sortList1);

     var List3 = document.getElementById("ddlSortField3");
     var sortList3 = List3.options[List3.selectedIndex].text;
     List3.options.remove(sortList2);

     var List4 = document.getElementById("ddlSortField4");
     var sortList4 = List4.options[List4.selectedIndex].text;
     List4.options.remove(sortList3);
}

【问题讨论】：

如果您将代码粘贴到 jsfiddle 或 jsbin 中，我很乐意提供帮助 :)

标签： javascript drop-down-menu

【解决方案1】：

在您的代码中：

> function RemoveItems(){

按照惯例，以大写字母开头的变量名是为构造函数保留的，因此：

function removeItems() {

>     var List1 = document.getElementById("ddlSortField");
>     var sortList1 = List1.options[List1.selectedIndex].text;

所以 sortList1 将是一个字符串。

>     var List2 = document.getElementById("ddlSortField2");
>     var sortList2 = List2.options[List2.selectedIndex].text;
>     List2.options.remove(sortList1);

options 集合的remove 方法采用单个参数，该参数是其中一个选项的索引。您没有显示 sortList1 的值是什么，也没有显示 List2 有多少选项。请注意，选项集合是实时的，因此如果您删除一个选项，则可能会调整其他选项的索引，以便它们从 0 到 options.length - 1 连续。

【讨论】：

这正是我正在做的事情，同样的原因也在那里。有什么方法可以避免传染性价值问题？
不要使用索引来引用选择元素之间的选项，使用值或文本一些更适合您要求的其他属性或属性。

【解决方案2】：

您可以使用这样的代码：jsFiddle。

基本上，您首先将change 事件绑定到每个列表，然后在更改值时将这些元素隐藏在所有列表中...

【讨论】：

不，它不工作，因为我有两个脚本在同一个事件上运行，这一切都冻结了。

【解决方案3】：

我做了一个与@Muhammad Omair 的稍有不同的，这个更有活力。 注意这是 jQuery

var removeSelection = function(select) {
    $('select').filter(':not(#' + select.attr('id') + ')').each(function() {
        var index = select.find(':selected').index();
        $(this).find('option:eq(' + index + ')').remove();
    });
};

$(function() {
    $('select').change(function() {
        removeSelection($(this));
    });
});

这是一个 jsfiddle http://jsfiddle.net/cA3F9/

【讨论】：

【解决方案4】：

使用 jQuery 删除选项

$(document).ready(function(){
    $('#ddlSortField').change(function(){
        var index = $("#ddlSortField option:selected").val();

        $('#ddlSortField2 option:eq(' + index + ')').remove();
        $('#ddlSortField3 option:eq(' + index + ')').remove();
        $('#ddlSortField4 option:eq(' + index + ')').remove();
 });
});

请注意，在您的 html 中，您的选项值必须与此相同：

<select id="ddlSortField">
    <option value="1">test1</option>
    <option value="2">test2</option>
    <option value="3">test3</option>
</select>

<select id="ddlSortField1">
    <option value="1">test1</option>
    <option value="2">test2</option>
    <option value="3">test3</option>
</select>

【讨论】：