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

Question

Hej 伙计们！

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

小提琴示例：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.) 如果第一个下拉菜单再次更改，或者再次将第 2/3/4 个值重置为“默认”？

对不起，我的英语不好。希望有人能理解我的问题。 谢谢你的帮助。 :)

Answer 1

回答第一个问题，

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

例子，

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

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

 $("#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;
});

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

回答第二个，

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

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

回答第三个，

这将在更改第一个时重置第二个、第三个、第四个。

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

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

JSFIDDLE 第三次。

Answer 2

这是一种不同的格式。您可以使用 Optimus Prime 的答案弄清楚其他人。

例如。禁用第一个下拉菜单。 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');
});