javascript - Javascript 使用文本输入中的值选择下拉选项?
问题描述
我需要根据我的用户将在文本字段中输入的内容来选择一个下拉选项。文本字段是一个数字,下拉列表将数字放在一个范围内,以根据所选价格范围计算总和。
处理此问题的表格部分是:
<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 错误,但选择字段没有被更新。任何人都可以建议吗?
更新:链接到小提琴 - https://jsfiddle.net/xg6ktr1a/
谢谢!
解决方案
$('#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>
推荐阅读
- apache - 如何使用 Telnet 发送 HTTP 请求?
- reactjs - 我收到此错误,我不知道该怎么办,“TypeError:render is not a function”
- angular - 如何使用 Angular 11 在 ngFor 中设置临时变量?
- c++ - 为什么我的静态 std::vector 从类中使用时会擦除?
- java - 如何在 JAXB 中使用嵌套列表和对象来设置属性顺序
- google-cloud-platform - DataFlow/Apache Beam 核心转换
- c++ - C++:函数无法访问 main() 函数中定义的变量
- javascript - React - 无法从 ContextAPI 记录值,但可以设置值
- c++ - ESP32 简单按钮按住 3 秒示例。输出似乎没有意义?
- python - Backtab 在 MacOS、Zsh 中使用 Ipython