比较选择值并在匹配时显示警报

Question

我有 4 个下拉菜单，您必须从中选择一个选项。

如果您多次选择相同的选项，我想要做的是显示警报。它的目的是保持比赛的分数，这样一个人就不能玩 2。

目前下拉菜单如下所示：

<select id="users_1" aria-labelledby="dropdownMenu1">
    <option>Select player</option>
    <?php foreach($users as $user) : ?>
    <option value="<?=$user['id_user']?>"><a href="#"><?=$user['nume']?></a></option>
    <?php endforeach; ?>
</select>

我在 JQuery 中尝试做的是：

$("#users_2").change(function() {
    var a=$(this).val("#users_1");
    var b=$(this).val("#users_2");
    if(a == b) {
        alert($(this).val());
    }
});

我也试着像这样比较它们：

$("#users_2").change(function() {
    if($(this).val() == $("#users_1").val()) {
        alert($(this).val());
    }
});

似乎没有一个工作，我不知道为什么。我已经检查过，实际值是从视图中获取的，但是 if 子句显然无法比较它们。

感谢您的帮助！非常感谢！

Answer 1

获取你的价值观，不要设置它们

改变这个…

$("#users_2").change(function() {
    var a=$(this).val("#users_1");
    var b=$(this).val("#users_2");
    if(a == b) {
        alert($(this).val());
    }
});

……到这个……

$("#users_2").change(function() {
    var a = $("#users_1").val();
    var b = $(this).val(); // equivalent to $("#users_2").val()
    if(a === b) {          // Use strict comparison operator as a best practice
        alert(a + ' matches ' + b);
    }
});

让它充满活力

您可以通过侦听一组元素并使您的处理程序动态化，从而更进一步：

// Listen to set of all select elements.
$('select').on('change', function(e) {
  
  // Serialize form values.
  var vals = $('#select_player').serializeArray();
  
  // Convert to simple array of just values.
  vals = $.map(vals, function (val, i) {
    return val.value;
  });
  
  // Remove current selection from array…
  vals.splice(vals.indexOf($(this).val()), 1);
  
  // …then check to see if it's value was already there.
  if(vals.indexOf($(this).val()) !== -1) { // If value is found,
    
    // …reset current select element to default option,
    $(this).val('default');
    
    // …and alert user with a relevant message.
    alert('You cannot select this player more than once.');
  };
});

label {
  display: block;
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="select_player" name="select_player">
  <label>Player 1:
    <select id="users_1" name="users_1">
      <option value="default" selected="selected" disabled>Select player</option>
      <option value="uid001">John Doe</option>
      <option value="uid002">Jane Doe</option>
      <option value="uid003">Jerome Smith</option>
      <option value="uid004">Janet O'Public</option>
    </select>
  </label>

  <label>Player 2:
    <select id="users_2" name="users_2">
      <option value="default" selected="selected" disabled>Select player</option>
      <option value="uid001">John Doe</option>
      <option value="uid002">Jane Doe</option>
      <option value="uid003">Jerome Smith</option>
      <option value="uid004">Janet O'Public</option>
    </select>
  </label>

  <label>Player 3:
    <select id="users_3" name="users_3">
      <option value="default" selected="selected" disabled>Select player</option>
      <option value="uid001">John Doe</option>
      <option value="uid002">Jane Doe</option>
      <option value="uid003">Jerome Smith</option>
      <option value="uid004">Janet O'Public</option>
    </select>
  </label>

  <label>Player 4:
    <select id="users_4" name="users_4">
      <option value="default" selected="selected" disabled>Select player</option>
      <option value="uid001">John Doe</option>
      <option value="uid002">Jane Doe</option>
      <option value="uid003">Jerome Smith</option>
      <option value="uid004">Janet O'Public</option>
    </select>
  </label>
</form>

Answer 2

我在所有下拉列表中使用了相同的类，然后只使用了一个事件处理程序。

$('.dropdown').on('change', function (event) {
    var selectedValue = $(event.currentTarget).val();
    var matchedDropdowns = $('.dropdown').filter(function (index) {
      return $(this).val() === selectedValue;
    });
    if (matchedDropdowns.length > 1) {
      alert("Alert Alert!")
    }
  })

在事件处理程序中，我可以获得选定的值，过滤与该值匹配的所有下拉列表，如果我获得超过 1 个下拉列表，我将只显示警报。

你可以在fiddle查看。