如何检查在一个下拉列表中选择的选项是否在另一个下拉列表中选择答案

【问题标题】：How to check option selected in one drop-down is selected or not in another drop-down如何检查在一个下拉列表中选择的选项是否在另一个下拉列表中选择
【发布时间】：2018-11-30 08:26:56
【问题描述】：

我有多个具有相同类名的下拉列表，如果我在一个下拉列表中选择一个选项，如何检查其他下拉列表中是否选择了该选项。

 <table>
    <tbody>
    <tr>
    <td>
        <select class="drop">
        <option value="1">A</option>
        <option value="2">B</option>
        <option value="3">C</option>                                               
        </select>
    </td>
    </tr>

    <tr>
    <td>
        <select class="drop">
        <option value="1">A</option>
        <option value="2">B</option>
        <option value="3">C</option>                                               
        </select>
    </td>
    </tr>

    <tr>
    <td>
        <select class="drop">
        <option value="1">A</option>
        <option value="2">B</option>
        <option value="3">C</option>                                               
        </select>
    </td>
    </tr>
    <tbody>
    <table>

这是我的 jquery

$(document).on('change', '.drop', function () {
var value = $(this).val();
});

我坚持这一点，如何在另一个下拉列表中检查选定的 var 值是否被选中。

【问题讨论】：

您可以在<select> 中添加各种选择器（classes ot ids）或尝试使用js .index() 或css eq 伪类。
@Oleg Nurutdinov。谢谢，可以使用不同的 id，但我正在尝试使用相同的类名。使用 .index() 我该怎么办？

标签： jquery html

【解决方案1】：

您可以循环所有 .drop 选择，不包括当前选择并检查它们的值：

$(document).on('change', '.drop', function () {
  var value = $(this).val();
  // initialize bool
  var selected_in_other_dropdowns = false;
  // loop all .drop excluding this one
  $('.drop').not(this).each(function() {
    if($(this).val() == value) {
      // same value found
      selected_in_other_dropdowns = true;
    }
  });
  if(selected_in_other_dropdowns === true) {
    // do stuff
  }
});

【讨论】：

【解决方案2】：

你这样检查。

循环其他.drop 类，并将所选值与其他下拉值进行比较。

$(document).on('change', '.drop', function () {
var value = $(this).val();
 $('.drop').not(this).each(function(index,val){
   if(val.value == value) {
     console.log('already selected');
     // now do whatever you want.
   }
 })
});

CodePen

【讨论】：

【解决方案3】：

我认为您可以只使用 jquery 选择器来执行此操作，而无需循环如下：

$(document).on('change', '.drop', function () {
var value = $(this).val();
var same_selected = $(".drop").not(this).find(`option[value="${value}"]:selected`)
if (same_selected.length<=0) console.log("No Match")
else console.log(`there is ${same_selected.length} Match with current selection !`)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tbody>
    <tr>
    <td>
        <select class="drop">
        <option value="1">A</option>
        <option value="2">B</option>
        <option value="3">C</option>                                               
        </select>
    </td>
    </tr>

    <tr>
    <td>
        <select class="drop">
        <option value="1">A</option>
        <option value="2">B</option>
        <option value="3">C</option>                                               
        </select>
    </td>
    </tr>

    <tr>
    <td>
        <select class="drop">
        <option value="1">A</option>
        <option value="2">B</option>
        <option value="3">C</option>                                               
        </select>
    </td>
    </tr>
    <tbody>
    <table>

【讨论】：