Javascript 使用文本输入中的值选择下拉选项？答案

【问题标题】：Javascript to select dropdown option using value from text input?Javascript 使用文本输入中的值选择下拉选项？
【发布时间】：2020-07-29 20:34:27
【问题描述】：

我需要根据我的用户将在文本字段中输入的内容来选择一个下拉选项。文本字段是一个数字，下拉列表将数字放在一个范围内，以根据所选价格范围计算总和。

处理这个问题的表格部分是：

<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>

我使用的javascript是：

<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>

我没有收到任何 javascript 错误，但选择字段没有更新。谁能给点建议？

更新：链接到 Fiddle - https://jsfiddle.net/xg6ktr1a/

谢谢！

【问题讨论】：

bedNumber 是一个元素，而不是数字或字符串。你需要 .value 关闭它来获取字符串值。
另外，请注意不要在更改事件处理程序中声明 setSelectedValue 函数。范围太小，每次都会重新创建它。该方法的内容中没有任何内容需要这样构造。
我仍然无法让它工作:(((我试过 bedNumber = getElementById('id').value; 和 parseInt(getElementById('id').value); 和还是什么都没有……

标签： javascript forms dropdown

【解决方案1】：

不要循环选择选项，而是尝试简单地设置选择元素本身的value。 Here's a comparison of select-value-setting methods from another SO user.

此外，您正在尝试对字符串而不是数字使用小于/大于比较...所以这些条件永远不会满足。您可以通过将 bedNumber 强制转换为整数，然后检查该数字来解决此问题。

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

【讨论】：

【解决方案2】：

$('#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>

【讨论】：