如何根據輸入的值自動選擇選項

根據輸入的值，我需要在文檔就緒中實際選擇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'必須被選中。

當輸入沒有值時，選擇必須表現爲默認值。

謝謝！

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：

來源

2010-12-04 Igor Yakushchenko

你使用任何JavaScript框架？或者你正在看如何使用普通javascript來做到這一點 – 2010-12-04 16:21:46

對不起，我忘了說我正在使用jquery – 2010-12-04 16:36:15

你的「關於文檔準備好」之類的提示，你可能會使用jQuery，與假設下進行的（雖然也許提錯誤地），我爲你提供這個：

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

With a demo at JS Fiddle。

編輯響應OP的問題：

如何比較選項的值的第一個字輸入的值？我的意思是如果我有選項值'hello'和輸入值'hello world'腳本必須在其值中選擇包含'hello'的選項。

對，考慮到你的發佈示例和你的問題之間的差距，我將嘗試解決這兩種可能性。

$(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：

首先，根據其文本組件（在上面的代碼中， 'myVal1'， 'myVal2' 位）選擇一個option注意的文本組件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 Fiddle demo。

這些演示可能與keyup()或同等操作/事件一起使用，但submit()似乎是更好的選擇。

來源

2010-12-04 16:38:26

香草JS

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

來源

2010-12-04 16:33:20

爲什麼我們需要改變？文本框已經在加載時被填充，你所需要做的就是讀取設置它... – kobe 2010-12-04 16:38:11

更新了代碼。我認爲這也是一個好主意，也可以通過改變來觸發它，不是嗎？ – 2010-12-04 16:42:10

類似下面應該工作///

<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" 

});

來源

2010-12-04 16:41:11 kobe

如何根據輸入的值自動選擇選項

回答

相關問題