Javascript.change() 错误。不会自动更改 chrome 中的 select 框

Question

你好，我有一个输入框，当我在其中输入一个值并根据该值更改我的 select 框。我已经用了几个星期了，但突然间它不起作用了。这是我应用程序中最重要的部分，问题太大了。在 firefox 中不能工作 chrome。

现在我要找到问题的根源，但不太确定如何解决它。这在 firefox 中有效，但在 chrome 中无效。 $('#agreement_selected_service option:visible:first').prop('selected', true).change(); <-- 这是我用来在每次对字数进行 input/keyup/change 时自动更改框的方法。我添加了一个日志 console.log('test'); 以查看我的脚本是否到达了 .change() 发生的位置并且控制台打印出来......所以这个 $('#agreement_selected_service option:visible:first').prop('selected', true).change(); 现在似乎有问题？感谢您的帮助。

总而言之，我在任何 keyup 上的 word-count 输入都不会自动将 select 选项更改为下一个可用选项。仅在 Firefox 中工作。 select 框 "first option" / "currently selected" 即使在禁用时也保持不变。这让我不得不手动更改 select 框来更改服务。但应该是当前未禁用的第一个选项。

输入框id = #word-count和select框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 没有按照您的想法行事。

根据 :visible

的 jQuery 文档

All option elements are considered hidden, regardless of their selected state.

所以您可能想将其更改为

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

Javascript.change() 错误。不会自动更改 chrome 中的 select 框

Javascript .change() error. not automatically changing select box in chrome

html

javascript

jquery

input

onchange