回答第1个问题，

Question

Hej Folks！

我得到了以下脚本示例来做出一些选择：

小提琴示例：http://jsfiddle.net/dataminer/7zYUS/1/

$(function(){

var My_2_MadeSelection = {

// Second Selection
'001': ['004'],
'002': ['005'],
'003': ['006']
};

// Third Selection
var My_3_MadeSelection = {

'001': ['007'],
'002': ['008'],
'003': ['009']
};

// Fourth Selection
var My_4_MadeSelection = {

'001': ['010'],
'002': ['011'],
'003': ['012']
};


// var
$('#001').change(function() {
var availableMy_2_MadeSelection = My_2_MadeSelection[this.options[this.selectedIndex].value];
var availableMy_3_MadeSelection = My_3_MadeSelection[this.options[this.selectedIndex].value];
var availableMy_4_MadeSelection = My_4_MadeSelection[this.options[this.selectedIndex].value];

// groups
$('#002 option').attr('disabled', function () { return $.inArray(this.value, availableMy_2_MadeSelection) == -1 });
$('#003 option').attr('disabled', function () { return $.inArray(this.value, availableMy_3_MadeSelection) == -1 });
$('#004 option').attr('disabled', function () { return $.inArray(this.value, availableMy_4_MadeSelection) == -1 });
});

// change
$('#001').change(function() {
if (this.options[this.selectedIndex].value === 1) {
$('#002,#003,#004').attr("disabled", "disabled");
} else {
$('#002,#003,#004').removeAttr("disabled");
}
});

// trigger
$('#001').trigger('change');
});

HTML

<div id="selectdiv">
<p>1. Select</p>
<select id="001" class="001" name="001">
    <option selected="selected" value="001">001a</option>
    <option value="002">001b</option>
    <option value="003">001c</option>
  </select>

<p>2. Select</p>
<select id="002" class="002" name="002">
    <option selected="selected" value="004">002a</option>
    <option value="005">002b</option>
    <option value="006">002c</option>
  </select>


<p>3. Select</p>
<select id="003" class="003" name="003">
    <option selected="selected" value="007">003a</option>
    <option value="008">003b</option>
    <option value="009">003c</option>
  </select>


<p>4. Select</p>
<select id="004" class="004" name="004">
    <option selected="selected" value="010">004a</option>
    <option value="011">004b</option>
    <option value="012">004c</option>
  </select>
</div>

问题：如果用户现在做出了所有他/她的选择，则用户可以再次改变，这导致“不可用的组合”。：（

1。）在用户更改了第二个/第三个/第四个下拉列表后，是否有解决方案禁用第一个下拉列表？

2。）或者是否可以检查值并给出一个警告，“如果你改变这个，你将不得不再改变一个吗？”

3。）或者如果再次更改第一个下拉列表，请再次将第二/第三/第四个值重置为“默认值”？

Sory因为我的英语不好。希望有人理解我的问题。谢谢你的帮助。：）

Answer 1

回答第1个问题，

要禁用，您必须保留标记。您可以继续检查所有选择都已更改。

实施例，

var changed1 = false,
    changed2 = false,
    changed3 = false,
    changed4 = false;

然后改变任何一个，比如说第1个，

 $("#001").change(function(){
         changed1 = true;
         if(changed2 && changed3 && changed4){
                $("#001").prop('disabled', true);
         }
  });

 $("#002").change(function(){
         changed2 = true;

}); 
$("#003").change(function(){
         changed3 = true;
}); 
$("#004").change(function(){
         changed1 = true;
});

因此，您可以保留所有输入都已更改的日志。

回答第2个，

我不明白你为什么要问这个，

$('#001').change(function(){
    alert("If you change this, you also will have to change the other 3.");
});

回答第3个，

这会在更改第一个时重置第2个，第3个，第4个。

$('#001').change(function(){
    $('#002, #003, #004').prop('selectedIndex',0);
});

您甚至可以根据需要更改'selectedIndex'。

第三次

JSFIDDLE 。

Answer 2

这是一种不同的格式。您可以使用Optimus Prime的答案来解决其他问题。

EG。禁用第一个下拉列表。 jsFiddle

$(function(){

    var My_2_MadeSelection = {
        // Second Selection
        '001': ['004'],
        '002': ['005'],
        '003': ['006']
    };

    // Third Selection
    var My_3_MadeSelection = {
        '001': ['007'],
        '002': ['008'],
        '003': ['009']
    };

    // Fourth Selection
    var My_4_MadeSelection = {
        '001': ['010'],
        '002': ['011'],
        '003': ['012']
    };

    $('select').change(function() {
        if ($(this).attr('id') == '001') {
            // var
            var availableMy_2_MadeSelection = My_2_MadeSelection[this.options[this.selectedIndex].value];
            var availableMy_3_MadeSelection = My_3_MadeSelection[this.options[this.selectedIndex].value];
            var availableMy_4_MadeSelection = My_4_MadeSelection[this.options[this.selectedIndex].value];
            // groups
            $('#002 option').attr('disabled', function () { return $.inArray(this.value, availableMy_2_MadeSelection) == -1 });
            $('#003 option').attr('disabled', function () { return $.inArray(this.value, availableMy_3_MadeSelection) == -1 });
            $('#004 option').attr('disabled', function () { return $.inArray(this.value, availableMy_4_MadeSelection) == -1 });
        }else{
            $('#001').attr('disabled','disabled');
        }
    });

    // trigger
    $('#001').trigger('change');
});

jquery：用户选择后如何防止下拉列表更改？

2 个答案:

回答第1个问题，

回答第2个，

回答第3个，