Question

您好，我试图阻止用户在多个选择框中选择相同的值，但我的javascript事件似乎无法正常工作。

以下是我所拥有的：

prioritize_change_handler.js

$(function ChangeHandler(){
  $("#character_first_stat").on('change', function() {
    if ($("#character_second_stat").val() === $(this).val() && this.value !== " ") {
      $(this).val(" ");
      alert("Value is the same as the second stat!")
    }
    if ($("#character_third_stat").val() === $(this).val() && this.value != " ") {
      $(this).val(" ");
      alert("Value is the same as the third stat!")
    }
    if ($("#character_fourth_stat").val() === $(this).val() && this.value != " ") {
      $(this).val(" ");
      alert("Value is the same as the fourth stat!")
    }
    if ($("#character_fifth_stat").val() === $(this).val() && this.value != " ") {
      $(this).val(" ");
      alert("Value is the same as the fifth stat!")
    }
    if ($("#character_sixth_stat").val() === $(this).val() && this.value != " ") {
      $(this).val(" ");
      alert("Value is the same as the sixth stat!")
    }
  });

对于剩下的5个下拉列表，代码会重复这样，将id更改为正确的ID。

这是我尝试将其应用于的视图/部分：

_rand_prompt_step.html.erb

<label for="character_first_stat">First Stat: </label>
    <select id="character_first_stat" name="character[first_stat]"  >
        <option disabled="disabled" selected="selected" hidden value=""> </option>
        <option value="strength">strength</option>
        <option value="dexterity">dexterity</option>
        <option value="constitution">constitution</option>
        <option value="intelligence">intelligence</option>
        <option value="wisdom">wisdom</option>
        <option value="charisma">charisma</option>
    </select>
    <span><%= @character.errors[:first_stat][0] %></span>

对于剩余的5个下拉列表，使用正确的ID重复此过程。

我已将此行应用于调用上面部分的视图的开头。

<script src="/assets/prioritize_change_handler.js" type="text/javascript"></script>

我甚至使用html而不是rails来尝试让它工作，但我似乎无法调用它。

有什么建议吗？

Answer 1

您遇到的问题是您正在调用匿名函数。

在标准JS中，这可能会正常工作......但是当您使用Rails时，可能是因为它没有被调用。

因此，您将要使用以下内容：

#app/assets/javascripts/application.js
$(document).on("change", "select.add_class", function() {
   var parent_val = $(this).val();
   var others = $("select.add_class").not(this);

   $.each(others, function(i,v){
      if (parent_val == $(this).val() && this.value !== " ") {
         // do something here
      }
   }
});

来自document对象的delegates the on function，允许JS在每次加载时捕获请求。

Answer 2

你可以重构jquery函数，如下所示，

$(function() {
  var selects = $('#first, #second, #third');
  selects.on('change', function() {
    var $this = $(this),
      duplicateFound = false,
      val = $this.val();
    selects.not($this).each(function(i, sel) {
      if ($(sel).val() === $this.val() && this.value !== "") {
        $this.val($this.data('val'));
        return duplicateFound = true;
      }
    });
    if (duplicateFound) return;
    $this.data('val', val);
  });
});

jsfiddle

希望这有帮助，

Answer 3

我会重构js以使其更具动态性。 https://jsfiddle.net/0z59sva3/

$(function(){
  var $selects = $('.add-a-class-to-the-selects');

  $selects.on('change', function(){
    // get all your local variables
    var 
      $this     = $(this),
      val       = $this.val(),
      offset    = $this.offset(),
      $others = $selects.not(this);
    // find any duplicate options
    $others.each(function(){
      var $other   = $(this),
          otherVal = $other.val();
      if( otherVal && val === otherVal ){
        alert('selected value matches: ' + $other.attr('id') );
        $this.val('');
      }
    });
  });
});

Onchange事件未被触发

3 个答案: