根据文本框值选择框选项

Question

下面是我的代码，该代码根据文本框的值更改选择选项，但我想更改选择选项的值而无需单击“立即选择”按钮。 意味着选择选项直接从文本框值更改，不需要按钮也可以这样做。

<select name="sel" id="MySelect">
    <option value="">Select One</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
    <option value="6">Six</option>
</select><br><br>

Select By Text: <br>
<input type="text" name="selText" value="Six">
<input type="button" name="selectNow" value="Select Now">

$(function() {
    $('input[name=selectNow]').on('click', function(event) {
        selectByText($.trim($('input[name=selText]').val()));
    }).click();
});

function selectByText(txt) {
    $('#MySelect option')
        .filter(function() { 
            return $.trim($(this).text()) == txt; 
        })
        .attr('selected', true);
}

Answer 1

逻辑是一样的，除了您需要挂钩selText元素上的keyup事件：

$('input[name=selText]').on('keyup', function() {
    selectByText($.trim($(this).val()));
});

小提琴的例子

Answer 2

只需更改selText的值更改时要引发的事件：

$('input[name=selText]').on('change', function(event) {
    selectByText($.trim(this.value));
}).change();

见小提琴