Javascript to select dropdown option using value from text input?

Question

I need to select a dropdown option based on what my user will enter in a text field. The text field is a number, and the dropdown puts the number in a range to calculate a total based on the price range selected.

The part of the form that deals with this is:

<input name="input_12" id="input_1_20" type="text" value="" class="medium">
<select name="input_15" id="input_1_15">
   <option value="0-100 beds|10" price="">0-100 beds      </option>
   <option value="101-250 beds|7.5" price=" -£ 2.50">101-250        -£ 2.50</option>
   <option value="251-500 beds|5" price=" -£ 5.00">251-500       -£ 5.00</option>
   <option value="501+ beds|2500" price=" +£ 2,490.00">501+ beds       +£ 2,490.00</option>
</select>

The javascript I am using is:

<script>
jQuery('#input_1_20').change(function() {
        var selectObj = document.getElementById('input_1_15');
       var bedNumber = document.getElementById('input_1_20') ;
       if (bedNumber <= '100') {
       setSelectedValue(selectObj, "0-100 beds|10"); }
      else if (bedNumber <= '250') {
       setSelectedValue(selectObj, "101-250 beds|7.5"); }
       else if (bedNumber <= '500') {
       setSelectedValue(selectObj, "251-500 beds|5"); }
function setSelectedValue(selectObj, valueToSet) {
    for (var i = 0; i < selectObj.options.length; i++) {
        if (selectObj.options[i].text== valueToSet) {
            selectObj.options[i].selected = true;
            return;
        }
    }
}
})

</script>

I'm not getting any javascript errors, but the select field is not being updated. Can anyone advise?

Update: Link to Fiddle - https://jsfiddle.net/xg6ktr1a/

Thanks!

Answer 1

 $('#input_1_20').change(function() { var bedNumber = parseInt(document.getElementById('input_1_20').value); console.log(bedNumber) if (bedNumber <= 100) { $("#input_1_15 option[value='0-100 beds|10']").prop('selected', true); } else if (bedNumber > 100 && bedNumber <= 250) { $("#input_1_15 option[value='101-250 beds|7.5']").prop('selected', true); } else if (bedNumber > 250 && bedNumber <= 500) { $("#input_1_15 option[value='251-500 beds|5']").prop('selected', true); } else { $("#input_1_15 option[value='501+ beds|2500']").prop('selected', true); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <input name="input_12" id="input_1_20" type="text" value="" class="medium"> <select name="input_15" id="input_1_15"> <option value="0-100 beds|10" price="">0-100 beds </option> <option value="101-250 beds|7.5" price=" -£ 2.50">101-250 -£ 2.50</option> <option value="251-500 beds|5" price=" -£ 5.00">251-500 -£ 5.00</option> <option value="501+ beds|2500" price=" +£ 2,490.00">501+ beds +£ 2,490.00</option> </select> </form>

Answer 2

Instead of looping through the select options, try simply setting the value of the select element itself. Here's a comparison of select-value-setting methods from another SO user.

Also, you're trying to use lesser-than/greater-than comparisons on strings, not numbers... so those conditions will never be met. You can fix this by coercing bedNumber to an integer, then checking that number.

jQuery('#input_1_20').change(function() {
  var selectObj = document.getElementById('input_1_15');
  var bedNumberInput = document.getElementById('input_1_20');

  // coerce this value to a Number
  var bedNumber = parseInt(bedNumberInput.value);
 
  if (bedNumber <= 100) {
    selectObj.value = "0-100 beds|10";
  }
  else if (bedNumber <= 250) {
    selectObj.value = "101-250 beds|7.5";
  }
  else if (bedNumber <= 500) {
    selectObj.value = "251-500 beds|5";
  }
  else {
    selectObj.value = "501+ beds|2500";
  }
});