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

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

例:

 myVal1 myVal2   

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

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

谢谢!

你提到的“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 Fiddle演示 :请注意, option元素的text组件不代表option元素的

其次,如果要将输入到myId输入元素的的第一部分链接到select / option元素的

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

JS小提琴演示 。

这些演示可以使用keyup()或等效的actions / events,但submit()似乎是更好的选择。

在香草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() }) 

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

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