Javascript 如何根据输入值自动选择选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4354455/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to autoselect option depending on input's value
提问by Igor Yakushchenko
I need select's option to be actually selected on document ready depending on an input's value.
我需要根据输入的值在准备好文档时实际选择选择的选项。
Example:
例子：
<select id="mySelect">
<option value="1">myVal1</option>
<option value="2">myVal2</option>
</select>
<input type="text" id="myId" value="2">
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.
例如，我们在页面加载时获得了输入的预定义值“2”。我需要自动选择选择框，它的选项与输入“myId”具有相同的值。我的意思是必须选择“mayVal1”。
When input has no value select must behave as default.
当输入没有值时，选择必须作为默认值。
Thanks!
谢谢！
回答by David says reinstate Monica
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:
您提到的“文档准备就绪”有点暗示您可能正在使用 jQuery，并做出了这样的假设（尽管可能是错误的），我为您提供：
$(document).ready(
function(){
var theValue = $('#myId').val();
$('option[value=' + theValue + ']')
.attr('selected',true);
});
Editedin response to OP's question:
针对 OP 的问题进行了编辑：
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.
如何将选项的值与输入值中的第一个单词进行比较？我的意思是如果我有选项值 'hello' 和输入值 'hello world' 脚本必须选择在其值中包含 'hello' 的选项。
Right, given the disparity between your posted example and your question, I'm going to try to address both of the possibilities.
是的，鉴于您发布的示例和您的问题之间存在差异，我将尝试解决这两种可能性。
First, to select an optionbased on its textcomponent (in your above code, the 'myVal1','myVal2' bits):
首先，要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 Fiddle demo: note that the text component of the optionelement does notrepresent the valueof the optionelement.
JS小提琴演示：注意的文本组件option元素并不能代表值的的option元素。
Secondly, if you want to link the first part of the value entered into the myIdinput element to the valueof the select/optionelement(s):
其次，如果你想进入的值的第一部分链接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;
});
});
These demos couldwork with keyup(), or equivalent actions/events, but submit()seemed the better choice.
回答by Horia Dragomir
in vanilla JS:
在香草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);
with jQuery:
使用 jQuery：
$(function(){
$('#myId').change(function(){
$('#mySelect option').removeAttr('selected').filter('[value=' + $(this).val() + ']').attr('selected', true);
}).change()
})
回答by kobe
something like below should work///
像下面这样的东西应该工作//
<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"
});
