Javascript 两个下拉列表,具有相互限制的不相同选项
我有两个下拉列表,选项不相同,但选项数相同。使用javascript(和jQuery1.11.1),我需要一个下拉列表来限制(通过禁用,而不是隐藏)另一个下拉列表中的可用选项到下一个选项和下面的选项 即:Javascript 两个下拉列表,具有相互限制的不相同选项,javascript,jquery,Javascript,Jquery,我有两个下拉列表,选项不相同,但选项数相同。使用javascript(和jQuery1.11.1),我需要一个下拉列表来限制(通过禁用,而不是隐藏)另一个下拉列表中的可用选项到下一个选项和下面的选项 即: 选项1_1** 选项1_2** 选项1\u 3**已禁用** 选项1\u 4**已禁用** 选项1\u 5**已禁用** 选项2\u 1**已禁用** 选项2\u 2**已禁用** 选择2_3** 选择2_4** 选择2_5** 如果选择了dropdown1中的选项2,则dropdown2
选项1_1**
选项1_2**
选项1\u 3**已禁用**
选项1\u 4**已禁用**
选项1\u 5**已禁用**
选项2\u 1**已禁用**
选项2\u 2**已禁用**
选择2_3**
选择2_4**
选择2_5**
如果选择了dropdown1中的选项2,则dropdown2的选项1和2将被禁用,dropdown2中只有剩余的选项可用,dropdown1中未使用的选项也将被禁用。如果在Dropdown2中进行初始选择,Dropdown2将以相同的方式控制dropdown1
任何帮助都将不胜感激。您可以通过使用
禁用属性来实现此要求
这是你的电话号码
希望这能解决你的问题
-帮助:)请写下您到目前为止尝试过的内容。抱歉,我没有说明在撰写本文时我没有尝试过任何东西,因为我一直在思考如何开始(我是新手)。但是,我刚刚发现这个问题[链接]的答案与我想要的答案相同,除了在一个列表中选择一个选项后,另一个列表中剩余的第一个选项是等效选项。我需要禁用等效选项,之后的下一个选项作为可用选项的开始。谢谢@Shriya R。虽然我确实需要dropdown2来控制dropdown1,但我修改了你的代码,通过复制更改函数和交换下拉名称,将控件从dropdown2包含到dropdown1,这似乎有效。没有请注意,您希望在dropdown2中进行的更改:)。你明白了吗?
<select id="dropdown1">
<option value="0">option1_1</option> **
<option value="0">option1_2</option> **
<option value="1">option1_3</option> **DISABLED**
<option value="2">option1_4</option> **DISABLED**
<option value="3">option1_5</option> **DISABLED**
</select>
<select id="dropdown2">
<option value="0">option2_1</option> **DISABLED**
<option value="0">option2_2</option> **DISABLED**
<option value="0">option2_3</option> **
<option value="1">option2_4</option> **
<option value="2">option2_5</option> **
</select>
$("select#dropdown1 option[value*='1'],select#dropdown1 option[value*='2'],select#dropdown1 option[value*='3'],select#dropdown2 option[value*='0']").prop('disabled',true);
$(document).ready(function () {
var index;
$('#dropdown1').change(function ()
{
$('#dropdown2 option').removeAttr('disabled');
index = $(this).find('option:selected').index() + 1;
$('#dropdown2').find("option:lt(" + index + ")").prop("disabled", true);
$('#dropdown1').find("option:gt(" + $(this).find('option:selected').index() + ")").prop("disabled", true);
index = index -1;
$('#dropdown1').find("option:lt(" + index + ")").prop("disabled", true);
});
});