Javascript 当从另一个下拉列表中选择值时,如何禁用下拉列表值?

Javascript 当从另一个下拉列表中选择值时,如何禁用下拉列表值?,javascript,jquery,bootstrap-modal,Javascript,Jquery,Bootstrap Modal,我有两个下拉列表,两个下拉列表包含相同的值Madurai、coimbatore、chennai 例子: 如果我在第一个下拉列表中选择值madurai,则需要禁用另一个下拉列表中的相同值。请帮助我 从…起 选择 哥印拜陀 马杜赖 钦奈 从…起 选择 哥印拜陀 马杜赖 钦奈 您可以根据其他选择的更改值,将项目添加/删除到其各自的下拉菜单中 更清楚地说,当第一个选项更改时,请读取所选选项的值,然后使用该值从第二个下拉菜单中删除/禁用该项。如果要从下拉列表中删除其他2个选项,您还需要确保正在显示它们,

我有两个下拉列表,两个下拉列表包含相同的值Madurai、coimbatore、chennai 例子: 如果我在第一个下拉列表中选择值madurai,则需要禁用另一个下拉列表中的相同值。请帮助我

从…起 选择 哥印拜陀 马杜赖 钦奈 从…起 选择 哥印拜陀 马杜赖 钦奈
您可以根据其他选择的更改值,将项目添加/删除到其各自的下拉菜单中

更清楚地说,当第一个选项更改时,请读取所选选项的值,然后使用该值从第二个下拉菜单中删除/禁用该项。如果要从下拉列表中删除其他2个选项,您还需要确保正在显示它们,您可以尝试以下操作

Html代码


您可以查看demo

引导下拉列表并不是真正用于此目的的,但是如果您确实想使用它,您可以使用jQuery来检测在第一个列表中选择了哪个项,并将禁用类添加到第二个列表中的对应项中

下面的代码是一个示例,但未经测试

从…起 选择 哥印拜陀 马杜赖 钦奈 从…起 选择 哥印拜陀 马杜赖 钦奈 $d1 li.clickfunction{ text=$this.text; $'d2 li'。每个函数索引,项{ 如果$item.text==text{ $item.addClassdisabled; } } }; 试试这个

<select id="one">
  <option value="0">--Select--</option>
  <option value="1">Coimbatore</option>
  <option value="2">Madurai</option>
  <option value="3">Chennai</option>
</select>

<select id="two">
  <option value="0">--Select--</option>
  <option value="1">Coimbatore</option>
  <option value="2">Madurai</option>
  <option value="3">Chennai</option>
</select>

去掉$this.text中的多余部分;无法编辑我自己b/c它需要超过6个字符此代码工作bt而不是选择和选项elation我必须使用li元素此代码工作bt而不是选择和选项elation我必须使用li元素您是否使用菜单中的下拉菜单?是..我在ul元素中使用了bootsrap下拉类@HazardI我在问你将把这个下拉列表放在你的应用程序中的什么地方?我不明白你的问题@Hazard
 jQuery('#select1').on('change', function() {
  var opt=this.value ;
  alert( this.value ); // or $(this).val()
  jQuery('#select2 option[value="'+opt+'"]').attr("disabled", true);
});
<select id="one">
  <option value="0">--Select--</option>
  <option value="1">Coimbatore</option>
  <option value="2">Madurai</option>
  <option value="3">Chennai</option>
</select>

<select id="two">
  <option value="0">--Select--</option>
  <option value="1">Coimbatore</option>
  <option value="2">Madurai</option>
  <option value="3">Chennai</option>
</select>
$("#one").on('change', function() {
$('#two option:eq(0)').attr('selected', 'selected')
  $('#two option').attr("disabled", false);
  var selected = $('#one option:selected').val();
  if(selected !=0)
  $('#two option[value="' + selected + '"]').attr("disabled", true);
});