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

how to Disable a dropdown value when a value is selected from another drop down?

本文关键字：一个 下拉列表 另一个 选择 如何      更新时间：2023-09-26

>我有两个下拉列表，两个下拉列表都包含相同的值（马杜赖，哥印拜陀，钦奈）例：如果我在第一个下拉列表中选择值（马杜赖），则需要禁用另一个下拉列表中的相同值。请帮助我

<div class="dropdown pull-right dropdown_custom quarter_from }}">
      <span>from</span>
      <button class="btn dropdown-supply dropdown-toggle dropdown-site select_txt_from" type="button" data-toggle="dropdown">Select
      <div style="float:right"><span class="caret"></span></div></button>
      <ul class="dropdown-menu dropdown-menu_custom">
          <li>coimbatore</li>
          <li>madurai</li>
          <li>chennai</li>
      </ul>
    </div>
<div class="dropdown pull-right dropdown_custom quarter_from }}">
      <span>from</span>
      <button class="btn dropdown-supply dropdown-toggle dropdown-site select_txt_from" type="button" data-toggle="dropdown">Select
      <div style="float:right"><span class="caret"></span></div></button>
      <ul class="dropdown-menu dropdown-menu_custom">
          <li>coimbatore</li>
          <li>madurai</li>
          <li>chennai</li>
      </ul>
    </div>

试试这个

<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);
});

现场演示

您可以根据其他选择中不断变化的值将项目添加/删除到各自的下拉菜单中。

更清楚地说，当第一个选择更改时，读取所选选项的值，然后使用该值从第二个下拉菜单中删除/禁用该项目。您还需要确保显示其他 2 个选项（如果您要从下拉列表中删除它们）

你可以试试这个

网页代码 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<select id="select1">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<select id="select2">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Js 代码

 jQuery('#select1').on('change', function() {
  var opt=this.value ;
  alert( this.value ); // or $(this).val()
  jQuery('#select2 option[value="'+opt+'"]').attr("disabled", true);
});

您可以在此处查看演示

Bootstrap 下拉列表并不是真正为此目的而制作的，但如果你真的想使用它，你可以使用 jQuery 来检测第一个列表中选择了哪个项目，并将禁用的类添加到第二个列表中的相应项目。

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

<div id="d1" class="dropdown pull-right dropdown_custom quarter_from }}">
      <span>from</span>
      <button class="btn dropdown-supply dropdown-toggle dropdown-site select_txt_from" type="button" data-toggle="dropdown">Select
      <div style="float:right"><span class="caret"></span></div></button>
      <ul class="dropdown-menu dropdown-menu_custom">
          <li>coimbatore</li>
          <li>madurai</li>
          <li>chennai</li>
      </ul>
    </div>
<div id="d2" class="dropdown pull-right dropdown_custom quarter_from }}">
      <span>from</span>
      <button class="btn dropdown-supply dropdown-toggle dropdown-site select_txt_from" type="button" data-toggle="dropdown">Select
      <div style="float:right"><span class="caret"></span></div></button>
      <ul class="dropdown-menu dropdown-menu_custom">
          <li>coimbatore</li>
          <li>madurai</li>
          <li>chennai</li>
      </ul>
    </div>    
<script>
$("#d1 li").click(function(e) {
    text = $(this).text();
    $('#d2 li').each(function(index, item) {
        if($(item).text() == text) {
            $(item).addClass("disabled");
        }
    })
});
</script>

相关文章：