Javascript .change（）错误。 不会自动更改Chrome中的选择框

Question

Hello I have an input box, when I enter a value in and based on the value changes my select box. I had this working for a couple weeks now and all of a sudden its not working.. This is the most important piece of my app so big problem..works in firefox not chrome.

Now iv come down to the source of the problem but not quite sure how to fix it. This works in firefox but not in chrome. $('#agreement_selected_service option:visible:first').prop('selected', true).change(); <-- this is what i used to make the box change automatically every time an input/keyup/change was made to word-count. I added a log console.log('test'); to see if my script made it to where the .change() occurs and the console prints out.... so this $('#agreement_selected_service option:visible:first').prop('selected', true).change(); seems to have something wrong now?? thanks for the help.

All in all my word-count input on any keyup isn't automatically changing the select option to the next first available. only is working in firefox. The select box "first option" / "currently selected" just stays the same even when its disabled. It makes me have to manually change the select box to change the service. but should be the first option that currently isnt disabled.

input box id = #word-count and select box 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

I do not think the option:visible:first is doing what you think it does.

According to the jQuery documentation of :visible

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

So you might want to change that to

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