Question

下面是我的代码，根据文本框值更改选择选项，但我想更改选择选项的值而不点击＆＃34;立即选择＆＃34;按钮。意味着直接从文本框值中选择选项更改，不需要按钮来执行相同操作。

<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

逻辑是相同的，除了你需要挂钩keyup元素上的selText事件：

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

Example fiddle

Answer 2

当selText的值发生变化时，只需更改要引发的事件：

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

请参阅Fiddle

根据文本框值选择框选项

2 个答案: