如何根据输入值自动选择选项

Question

我需要在文档就绪时实际选择select的选项,具体取决于输入的值.

例:

<select id="mySelect">
<option value="1">myVal1</option>
<option value="2">myVal2</option>
</select>

<input type="text" id="myId" value="2">

例如,我们在页面加载时有一个预定义的值'2'.我需要选择框自动选择,其选项具有与输入'myId'相同的值.我的意思是'mayVal1'必须被选中.

当输入没有值时,select必须表现为默认值.

谢谢!

Answer 1

你提到的"on document ready"有点暗示你可能正在使用jQuery,假设(虽然可能是错误的),我提供给你:

$(document).ready(
    function(){
        var theValue = $('#myId').val();
        $('option[value=' + theValue + ']')
            .attr('selected',true);
    });

在JS Fiddle进行演示.

编辑回应OP的问题:

如何将选项的值与输入值中的第一个单词进行比较？我的意思是如果我有选项值'hello'并且输入值'hello world'脚本必须在其值中选择包含'hello'的选项.

是的,鉴于您发布的示例与您的问题之间存在差异,我将尝试解决这两种可能性.

首先,option根据其文本组件选择一个(在上面的代码中,'myVal1','myVal2'位):

$(document).ready(
    function() {
        $('form:eq(0)').submit(
            function() {
                var theValue = $('#myId').val().split(" ",1);
                $('option:contains(' + theValue + ')').attr('selected', true);
                return false;
            });
    });

JS小提琴演示:请注意的文本组件option元素并不能代表值的的option元素.

其次,如果你想进入的值的第一部分链接myId输入元素的值的中select/ option件(S):

$(document).ready(
    function() {
        $('form:eq(0)').submit(
            function() {
                var theValue = $('#myId').val().split(" ",1);
                $('option[value=' + theValue + ']').attr('selected', true);
                return false;
            });
    });

JS小提琴演示.

这些演示可以使用keyup(),或等效的行动/事件,但submit()似乎是更好的选择.