0

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

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

4 回答 4

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>
于 2013-04-10T08:31:44.643 回答
1

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

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

于 2013-04-10T08:36:57.587 回答
1

我做了一个与@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/

于 2013-04-10T08:41:34.487 回答
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

于 2013-04-10T08:44:41.730 回答