如何根据输入值自动选择选项 [英] How to autoselect option depending on input's value

问题描述

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

I need select's option to be actually selected on document ready depending on an input's value.

示例：

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

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

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

For example, we've got a predefined value '2' of the input on page load. I need select-box to be auto-selected with it's option having the same value as input 'myId'. I mean 'mayVal1' must be selected.

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

When input has no value select must behave as default.

谢谢！

推荐答案

你提到的on document ready有点暗示你可能正在使用jQuery，并做出了这样的假设（虽然可能是错误的），但我提供给你：

Your mention of "on document ready" sort of suggests that you might be using jQuery, with that assumption made (albeit perhaps erroneously), I offer you this:

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

在JS Fiddle进行演示。

已编辑回答OP的问题：

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

How do I compare option's value to very first word in the input's value? I mean if I have option value 'hello' and input value 'hello world' script have to select option containing 'hello' in its value.

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

Right, given the disparity between your posted example and your question, I'm going to try to address both of the possibilities.

首先，选择一个选项基于其文本组件（在上面的代码中，'myVal1'，'myVal2'位）：

First, to select an option based on its text component (in your above code, the 'myVal1','myVal2' bits):

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

JS小提琴演示：请注意选项元素的文本组件不代表值选项的 元素。

JS Fiddle demo: note that the text component of the option element does not represent the value of the option element.

其次，如果要链接值的第一部分输入选项 / <$ c $的值的 myId 输入元素c>选项元素：

Secondly, if you want to link the first part of the value entered into the myId input element to the value of the select/option element(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（） 似乎是更好的选择。

These demos could work with keyup(), or equivalent actions/events, but submit() seemed the better choice.

这篇关于如何根据输入值自动选择选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！