Javascript 未触发Onchange事件

嗨，我试图阻止用户在多个选择框上选择相同的值，但是我的javascript事件似乎不起作用

以下是我所拥有的：

优先考虑变更处理程序.js

代码在剩下的5个下拉列表中重复，将id更改为正确的id

以下是我试图将其应用到的视图/局部视图：

_rand\u prompt\u step.html.erb

它使用正确的ID对其余5个下拉列表重复这样的操作

我已经将这一行应用于调用上述部分的视图的开头

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

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

---

有什么建议吗？

您可以重构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);
  });
});

---

希望这能有所帮助，

我会重构js，使其更具动态性

---

问题是您正在调用一个匿名函数

在标准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
      }
   }
});

---

这将从您的文档对象中删除，允许JS在每次加载时捕获请求。

这只是一个想法，但如果您阻止人们选择之前已选择的状态，将使人们很难改变主意，因为如果您愿意，他们必须在切换另一个状态之前取消选择一个状态。也许最好强调这两个数据都已被选中，并阻止提交表单，而不是阻止数据相同？相关问题

$(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);
  });
});

$(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('');
      }
    });
  });
});

#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
      }
   }
});