在jquery中获取具有相同类的多个下拉列表的选项值

Question

我已经添加了具有相同类名 select_drop 的多个下拉列表，并且有一个使用不同类名 drop 的下拉列表。如果它与两个下拉选项匹配，我想应用条件，然后警告同一列不能同时选择。例如：-如果我从第一个下拉列表中选择选项名字并从第三个下拉列表中选择选项名字，那么它会发出警报，这在我的代码中有效。但是如果我从第二个下拉列表中选择姓氏选项并选择选项，则会出现问题第三个下拉列表中的姓氏不起作用。问题是它只匹配第一个下拉选项而不是其他选项。我想要如果有人选择具有不同类的第三个下拉选项并且他选择选项名称 firstname 或 lastname 已经选择在上面的两个下拉列表中，它会提示无法选择相同的列。用户不能在具有不同类别的第三个下拉列表中再次选择相同的列或选定的列。如果他选择n 它会发出警报。

<select class="select_drop" id="select_drop">
    <option value="firstname">firstname</option>
    <option  value="lastname">lastname</option>
    <option value="email">email</option>
    <option value="gender">gender</option>

</select>
<br>
<select class="select_drop" id="select_drop">
    <option value="firstname">firstname</option>
    <option  value="lastname">lastname</option>
    <option value="email">email</option>
    <option value="gender">gender</option>

</select>
<br>
<select class="drop" id="drop">
    <option value="firstname">firstname</option>
    <option  value="lastname">lastname</option>
    <option value="email">email</option>
    <option value="gender">gender</option>

</select>
<script>
$(function () {
        $("#drop").change(function () {
            var selectedText = $(this).val();

          var v = $('#select_drop').find("option:selected").text();

            if(selectedText == v){
              alert('same column name cant be choose');
              location.reload();
            }
           alert(v + selectedText);
        });
    });
  </script>

Answer 1

我的建议是，您需要检查每个下拉列表，还需要从前两个下拉列表中删除 id。这是我的代码（抱歉语法错误和拼写错误，因为我现在正在打电话）：

<script> 
    $(function () { 
        $("#drop").change(function () { 
            var selectedText = $(this).val();
            var v = [];
            $(".select_drop").each(function(){
                v.push($(this).val());
            })     
            if($.inArray(selectedText, v) >= 0){ 
                 alert('your alert'); 
                 location.reload(); 
            } 

         })
    })
</script> 

Answer 2

首先，您的 DOM 中不能有相同的元素 ID。 为第一个和第二个下拉菜单分配不同的 ID。

<select class="select_drop" id="select_drop_1">
    <option value="firstname">firstname</option>
    <option  value="lastname">lastname</option>
    <option value="email">email</option>
    <option value="gender">gender</option>

</select>
<br>
<select class="select_drop" id="select_drop_2">
    <option value="firstname">firstname</option>
    <option  value="lastname">lastname</option>
    <option value="email">email</option>
    <option value="gender">gender</option>

</select>

然后在您的事件侦听器中检查两个下拉列表。

<script>
$(function () {
        $("#drop").change(function () {
            var selectedText = $(this).val();

            var first_drop = $('#select_drop_1').val(); // Get selected value of first dropdown
            var second_drop = $('#select_drop_2').val(); // Get selected value of second dropdown

            if(selectedText == first_drop || selectedText == second_drop){ // Check if either of the first and second have the same value with the third
              alert('same column name cant be choose');
              location.reload();
            }
        });
    });
  </script>

我添加了一个小提琴：https://jsfiddle.net/so5a3k67/