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

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”。

当输入没有值时，选择必须表现为默认。

谢谢！

Answer 1

您提到的“文档准备就绪”有点表明您可能正在使用 jQuery，根据这一假设（尽管可能是错误的），我向您提供以下内容：

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

在 JS Fiddle 上进行演示。

---

编辑以回应OP的问题：

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

是的，考虑到您发布的示例和问题之间的差异，我将尝试解决这两种可能性。

首先，根据其文本组件（在上面的代码中，“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 Fiddle demo：请注意，option 元素的文本组件不 表示 option 元素的值。

其次，如果您想将 myId 输入元素中输入的值的第一部分链接到 select/的 value option 元素：

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

JS Fiddle 演示。

这些演示可以与 keyup() 配合使用，或等效的操作/事件，但 submit() 似乎是更好的选择。

Answer 2

像下面这样的东西应该可以工作///

<select>
    <option value="0">One</option>
    <option value="1">Two</option>
</select>

$(document).ready(
    var inputValue = $('#id').val();
    $('select').val('1'); // selects "Two"
    $('select').val(inputValue); // also selects "Two"

});

Answer 3

在普通 JS 中：

var listener = function(ev){
var input = document.getElementById('myId');
for(var i = 0, elems = document.getElementById('mySelect'), l = elems.length; i < l; i++)
    elems[i].selected = elems[i].value == input.value;    
}
listener();
document.getElementById('myId').addEventListener('change', listener, false);

使用 jQuery：

$(function(){
    $('#myId').change(function(){
       $('#mySelect option').removeAttr('selected').filter('[value=' + $(this).val() + ']').attr('selected', true);
    }).change()
})

Answer 4

$('#mySelect').val('2').change();