Question

我正在尝试做什么：我有多个选择下拉列表，如果在其中一个选择下拉列表中选择了一个选项，并且该值存在于任何其他下拉列表中，则该值应该被禁用/不可选，它又可以变为如果选择已更改，则启用/可选。

当前代码会发生什么：它的工作量大约为50％，我无法查明问题，但我认为因为我正在应用for循环，所以某些值会被跳过而不会被禁用，有时“选择”默认选项变为停用？！

方法：我编写代码的方式是当下拉框中的选项出现时，启用所有选项，获取第一个下拉列表的当前选定值，如果它不是默认的“选择”，则通过每个下拉框并禁用任何匹配值，然后对第二个下拉列表的当前选定值重复此过程，依此类推。

小提琴：http://jsfiddle.net/haakym/r2y73ndt/

代码： HTML：

<div id="nomineeInfo">
<div>
    <label>Manager</label>
    <select class="positionTypes" id="pos_manager">
        <option value="0">Select</option>
        <option value="1">John Smith</option>
        <option value="2">Jane Smith</option>
        <option value="4">John Smoe</option>
    </select>
</div>
<div>
    <label>Deputy</label>
    <select class="positionTypes" id="pos_deputy_manager">
        <option value="0">Select</option>
        <option value="1">John Smith</option>
        <option value="2">Jane Smith</option>
        <option value="3">John Doe</option>
    </select>
</div>
<div>
    <label>Finance</label>
    <select class="positionTypes" id="pos_finance">
        <option value="0">Select</option>
        <option value="1">John Smith</option>
        <option value="3">John Doe</option>
        <option value="4">John Smoe</option>
    </select>
</div>

使用Javascript：

$('#nomineeInfo').on('change', '.positionTypes', function () {
    var selectedValue = $(this).val();
    var dropdownOnChangeId = $(this).prop('id');
    var positionTypesEn = ['manager', 'deputy_manager', 'finance'];

    // set all enabled
    for (var i = 0; i < 7; i++) {
        $('#pos_'+positionTypesEn[i]).each(function(){
            $("option", this).removeAttr('disabled');
        });
    };

    for (var i = 0; i < 7; i++) {
        // if position type selected value is not 0, i.e. if it's not "Select"
        if( $('#pos_' + positionTypesEn[i]).val() != 0 ){
            // go through each option in every dropdown
            for (var j = 0; j < 7; j++) {
                console.log( positionTypesEn[j] ); // show current dropdown
                $('#pos_' + positionTypesEn[j] + ' option').each(function(k){

                    if( !$(this).is(':selected') ){ 
                        if( $(this).val() == selectedValue && $(this).val() != 0 ){
                            $(this).prop('disabled', 'true');
                            console.log('disabled: ' +  $(this).val() );
                        }
                    }
                });
            }
        }
    }
});

非常感谢任何帮助！

Answer 1

试

$("select.positionTypes").change(function () {
    $("select.positionTypes option").prop('disabled', false);
    $("select.positionTypes option:selected:not([value='0'])").each(function (i) {
        $("select.positionTypes option:nth-child(" + ((+this.value) + 1) + ")").prop('disabled', true)
    });
});

DEMO

Answer 2

试试这个，优化版

$("select.positionTypes").change(function () {
    $("select.positionTypes option[value='" + $(this).data('index') + "']").prop('disabled', false);
    $(this).data('index', this.value);
    $("select.positionTypes option[value='" + this.value + "']:not([value='0'])").prop('disabled', true);
});

DEMO

Answer 3

你的html结构，类和尝试都不错，但是如果你使用jQuery，你应该使用它的全部优点，比如.each函数，让你的实时更容易。

我会这样做：

$('.positionTypes').on('change', function () { //When any select changes...
    var changedID = $(this).attr("id"); //Save id of select that was changed...
    var selectedValue = $(this).val(); //Save value of select was changed...
    if($(this).val() != "0") { //If we did not select a 0 value at all...
        $('.positionTypes option').prop("disabled", false); //Enable all disabled options of all selects...
        $('.positionTypes').each(function() { //Loop all existing selects
            if($(this).attr("id") != changedID) { //If the select id is not our own select
                $("#" + $(this).attr("id") + " option").each(function() { //loop all options of all selects except the one excluded by previous if clause
                    if($(this).attr("value") == selectedValue) { //if the value matches to saved value
                        $(this).prop("disabled", true); //Disable this one
                    }
                });
            }
        });
    };
});

我不确定这是否100％完成至少它可以禁用具有相同值的其他选项的选项以及更多结构化代码。

Answer 4

启用所有选项后，您需要浏览所有菜单，获取所选值，并在其他菜单中重新禁用所有菜单，而不仅仅是刚更改的菜单。

$(document).ready(function () {
    $('#nomineeInfo').on('change', '.positionTypes', function () {
        // Get the selected options of all positions
        var allSelected = $(".positionTypes").map(function () {
            return $(this).val();
        }).get();

        // set all enabled
        $(".positionTypes option").removeAttr("disabled");

        // Disable selected options in other positions
        $(".positionTypes option:not(:selected):not([value='0'])").each(function () {
            if ($.inArray($(this).val(), allSelected) != -1) {
                $(this).attr('disabled', true);
            }
        });
    });
});

DEMO

选中选项时，禁用选择下拉组中的选择选项

4 个答案:

DEMO

DEMO