如何使用jquery通过数组从下拉列表中只获得两个选项

这里我试图将我的select标记值推入数组，但数组部分出现了一些错误。在代码中，我有两个相同的条件，所以当我在输入字段中输入5位数字时，它应该只显示两个值，而不是显示整个列表，并且它只能使用数组。有人能帮我吗？

代码：

<script type="text/javascript">

$(document).keyup(function(){ 
var arr=[];
$("#txtFirstNo").on("input", function() {

if ( $("#txtFirstNo").val().match(/^(d{5})$/, '') ) {
arr.push($("#selResult").val("aaa"));
//alert("hey");
}
if ( $("#txtFirstNo").val().match(/^(d{5})$/, '')) {
arr.push($("#selResult").val("bbb"));
}
if ( $("#txtFirstNo").val().match(/^(d{10})$/, '')) {
arr.push($("#selResult").val("ccc"));
}
$('#selResult').text(arr);
});
});

</script>

</head>
<body>
Number :
<input type="text" id="txtFirstNo" name="txtFirstNo" />
Options :
<select id="selResult" >
<option>Select</option>
<option value="aaa">AAA</option>
<option value="bbb">BBB</option>
<option value="ccc">CCC</option>
</select>

</body>
</html>

对代码的一些更改：

使用input事件获取任何更改(例如粘贴(
使用$("select").val("new value")设置值
"；新值"；必须与value=选项之一匹配，并且区分大小写
可以使用$("input").val().length检查有多少个字符

为了便于测试，我将字符数减少到了2和4，并给出了更新的片段：

$("#txtFirstNo").on("input", function() {
$("#selResult").val("");
if ($(this).val().length >= 2) {
$("#selResult").val("aaa");
}
if ($(this).val().length >= 4) {
$("#selResult").val("bbb");
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="txtFirstNo" name="txtFirstNo" /> Result:
<select id="selResult">
<option></option>
<option value="aaa">AAA</option>
<option value="bbb">BBB</option>
</select>

这可以稍微改进(微优化(，因为它多次设置select.val((，但在这种情况下是可以的

对于多选，直接在所需选项上设置selected属性会更容易/更清晰。

以下示例使用多重选择和重叠条件(每当输入值以3个数字开头时，也会选择"CC"(。

$(document).keyup(function() {
let firstNo = $("#txtFirstNo").val();
// first clear any previously selected options
$('#txtResult option').prop('selected', false);

if (firstNo.match(/^d{10}$/, '')) {
$('#txtResult option[value="aaa"]').prop('selected', true);
}
if (firstNo.match(/^d{12}$/, '')) {
$('#txtResult option[value="bbb"]').prop('selected', true);
}
if (firstNo.match(/^d{3}/, '')){
$('#txtResult option[value="ccc"]').prop('selected', true);
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="txtFirstNo" name="txtFirstNo" />
Result:
<select id="txtResult" multiple>
<option value=""></option>
<option value="aaa">AAA</option>
<option value="bbb">BBB</option>
<option value="ccc">CCC</option>
</select>

相关内容

最新更新

热门标签：