Question

我有四个下拉列表，我手动填写它们。

现在我想添加一个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);
}

Answer 1

使用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>

Answer 2

您可以使用以下代码：jsFiddle。

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

Answer 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/

Answer 4

在您的代码中：

> 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连续。

根据首先使用Javascript中的选择从第二个下拉列表中删除项目

4 个答案: