Question

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

<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/

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

2 个答案: