如何在 HTML 中选择特定值后使选择组可供选择

Question

场景：

假设..具有 2 个选择组的 HTML 网络：

选择组 1 具有['value0'],['value1'],['value2'],['value3'];

• 如果选择"value0"，则选择"组 2"将显示"全部灰显" 值。
  

• 如果选择"value1"，则选择"组 2"将显示['value1_1'],['value1_2']，其他值灰显
  

• 如果选择"value2"，则选择"组 2"将显示['value2_1'], ['value2_2']，其他值将灰显。

• 如果选择"value3"，则选择"组 2"将显示['value3_1'],['value3_2']，其他值灰显。

我已经搜索了很多数据，但仍然不是我需要的......
谁能帮忙？

Answer 1

如果我正确理解你的问题，这会像你要找的吗？

$('#one').change(function() {
if ($(this).val() == '') {
$('#two').prop('disabled', true);
}
if ($(this).val() == '1') {
$('#two').prop('disabled', false);
$('#two option').each(function(){ 
$('.one_one').removeAttr("disabled");
$('.two_two').attr("disabled","true");
$('.three_three').attr("disabled","true");
});
}

if ($(this).val() == '2') {
$('#two').prop('disabled', false);
$('#two option').each(function(){ 
$('.one_one').attr("disabled","true");
$('.two_two').removeAttr("disabled");
$('.three_three').attr("disabled","true");
});
}

if ($(this).val() == '3') {
$('#two').prop('disabled', false);
$('#two option').each(function(){ 
$('.one_one').attr("disabled","true");
$('.two_two').attr("disabled","true");
$('.three_three').removeAttr("disabled");
});
}

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="one">
<option value="">select</option>
<option value="1">select 1</option>
<option value="2">select 2</option>
<option value="3">select 3</option>
</select>
<select disabled id="two">
<option class ="one_one" value="value1_1">value1_1</option>
<option class ="one_one" value="value1_2">value1_2</option>
<option class ="two_two" value="value2_1">value2_1</option>
<option class ="two_two" value="value2_2">value2_2</option>
<option class ="three_three" value="value3_1">value3_1</option>
<option class ="three_three" value="value3_2">value3_2</option>
</select>