Javascript .change()错误。不自动更改铬中的复选框

Question

你好，我有一个输入框，当我输入一个值并根据值更改我的复选框时。我已经用了几个星期了，突然间它就不起作用了。这是我的应用程序中最重要的一块，在火狐中如此之大的problem..works，而不是铬。

现在，iv深入到问题的根源，但不太确定如何解决它。这在firefox中有效，但在chrome中不起作用。$('#agreement_selected_service option:visible:first').prop('selected', true).change(); <--这就是每次输入/键加/更改字计数时，我都会自动更改框的内容。我添加了一个日志console.log('test');，以查看我的脚本是否到达了.change()发生的地方，并且控制台输出了.那么这个$('#agreement_selected_service option:visible:first').prop('selected', true).change();现在似乎出了什么问题？？谢谢你的帮助。

总之，我在任何键上的word-count输入都不会自动将select选项更改为下一个可用的选项。只在firefox上工作。复选框"first option“/ "currently”即使在禁用时仍然保持不变。它使我不得不手动更改复选框来更改服务。但是应该是目前还没有禁用的第一个选项。

输入框id = #word-count和复选框id = #agreement_selected_service

​

<div class="col-xs-7 ">
  <div class="form-group" style="">
    <label>Plan</label>
    <%= f.select :selected_service, ServiceType.all.order("id asc").collect {|x| [x.name, x.word_count]}, {}, :style => "width:100%;"%>

  </div>
</div>

<div class="col-xs-5">
  <div class="form-group" style="">
    <label>Word Count</label>
    <%= f.text_field :char_amount, class: "form-control", id: 'word-count', style: 'width:120px;', placeholder: "Ex. 500" %>
  </div>
</div>

​

price_calculation.js

​

$(function() {

  $("#word-count").bind("change keyup input", function() {


    var word_count = $('#word-count').val();
    var select = $('#agreement_selected_service');
    var options = $('#agreement_selected_service option');

    if (word_count < 7000) {

      options.each(function() {
        var tr = $(this);

        if (word_count <= 650 && tr.val() < 22000) {

          tr.show();
          tr.prop("disabled", false);
        } else if (word_count > 650 && tr.val() <= 650) {

          tr.hide();
          tr.prop("disabled", true);
        } else if (word_count >= 4000 && tr.val() <= 24999) {


          tr.show();
          tr.prop("disabled", false);

        } else if (tr.val() > 22000) {

          tr.hide();
          tr.prop("disabled", true);
        } else {
          tr.show();
          tr.prop("disabled", false);
        }
      });
      console.log("test");
      $('#agreement_selected_service option:visible:first').prop('selected', true).change();
    } else if (word_count >= 7000 && word_count <= 13999) {

      options.each(function() {
        var tr = $(this);
        if (tr.val() < 7000 || tr.val() >= 30000) {

          tr.hide();
          tr.prop("disabled", true);


        } else if (word_count >= 7000 && tr.val() <= 30000) {
          tr.show();
          tr.prop("disabled", false);
        } else {
          tr.show();
          tr.prop("disabled", false);
        }
      });
      $('#agreement_selected_service option:visible:first').prop('selected', true).change();
    } else if (word_count >= 14000 && word_count < 22000) {

      options.each(function() {
        var tr = $(this);
        if (tr.val() < 14000 || tr.val() >= 30000) {

          tr.hide();
          tr.prop("disabled", true);


        } else if (word_count < 22000 && (tr.val() >= 14000 && tr.val() < 22000)) {

          tr.show();
          tr.prop("disabled", false);
        } else {
          tr.show();
          tr.prop("disabled", false);
        }
      });

      $('#agreement_selected_service option:visible:first').prop('selected', true).change();
    } else if (word_count >= 22000 && word_count < 30000) {

      options.each(function() {
        var tr = $(this);
        if (tr.val() < 22000 || tr.val() >= 30000) {

          tr.hide();
          tr.prop("disabled", true);


        } else if (word_count < 25000 && tr.val() >= 24999) {

          tr.show();
          tr.prop("disabled", false);
        } else if (word_count >= 25000 && word_count < 30000 && tr.val() < 25000) {
          tr.hide();
          tr.prop("disabled", true);
        } else {
          tr.show();
          tr.prop("disabled", false);
        }


      });
      $('#agreement_selected_service option:visible:first').prop('selected', true).change();

    } else if (word_count >= 30000) {

      options.each(function() {
        var tr = $(this);
        if (tr.val() == 30000) {

          tr.show();
          tr.prop("disabled", false);
        } else {
          tr.hide();
          tr.prop("disabled", true);
        }


      });
      $('#agreement_selected_service option:visible:first').prop('selected', true).change();

    }

  });


  $("#agreement_selected_service").change(function() {
    console.log("changed");

  });

});

​

Answer 1

我不认为option:visible:first正在做你认为它做的事情。

根据jQuery的:visible文档

所有option元素都被认为是隐藏的，而不管它们的selected状态如何。

所以你可能会想把它改成

$('#agreement_selected_service option').filter(function(){
    return !this.disabled;
}).first().prop('selected', true).change();