根據輸入值更改選項值

我想根據輸入值更改選項值。例如，如果我把value02輸入，那麼選擇應該顯示選項，其他選項將隱藏。根據輸入值更改選項值

<input type="text" name="fname" value="" id="fname"> 
 

 
<select name="program" id="program"> 
 
    <option>Select Program Type</option> 
 
    <option value="1" title="value01">1</option> 
 
    <option value="2" title="value01">2</option> 
 
    <option value="1" title="value02">1</option> 
 
    <option value="2" title="value02">2</option> 
 
    <option value="1" title="value03">1</option> 
 
    <option value="2" title="value03">2</option> 
 
</select>

請幫

來源

2015-06-05 Suresh Mali

如果你表現出你有什麼到目前爲止已經試過，你會更容易得到響應。親自嘗試解決方案，如果遇到特定問題，請提問 –

@Suresh Mali，檢查我的答案確實有幫助。 – divy3993

蘇雷什，你已經在8個小時內收到5個答案，但你沒有回覆任何答案。這不是StackOverflow網站的最佳工作方式。當你發佈一個問題時，你應該與提供答案的人互動，以確保他們正在回答你想要的問題。而且，如果其中一個答案是您需要的，那麼您應該選中它作爲最佳答案，方法是選中旁邊的綠色複選標記。 – jfriend00

我認爲這是你在找

的答案

HTML

<input type="text" name="fname" value="" id="fname"> 
<select name="program" id="program"> 
    <option>Select Program Type</option> 
    <option value="1" title="value01">01 1</option> 
    <option value="2" title="value01">01 2</option> 
    <option value="1" title="value02">02 1</option> 
    <option value="2" title="value02">02 2</option> 
    <option value="1" title="value03">03 1</option> 
    <option value="2" title="value03">03 2</option> 
</select>

JS/JQuery的

$(document).mouseup(function (e) 
{ 
    var container = $("select"); 

    if (!container.is(e.target) // if the target of the click isn't the container... 
     && container.has(e.target).length === 0) // ... nor a descendant of the container 
    { 
     $("#program option[title='value01']").show(); 
     $("#program option[title='value02']").show(); 
     $("#program option[title='value03']").show(); 
    } 
}); 

$("select").click(function() 
{ 
var getVal = $("input[type=text]").val(); 
    if(getVal == "value01") 
    { 
     $("#program option[title='value02']").hide(); 
     $("#program option[title='value03']").hide(); 
    } 
    else if(getVal == "value02") 
    { 
     $("#program option[title='value01']").hide(); 
     $("#program option[title='value03']").hide(); 
    } 
    else if(getVal == "value03") 
    { 
     $("#program option[title='value01']").hide(); 
     $("#program option[title='value02']").hide();   
    } 
    else 
    { 
    } 

});

來源

2015-06-05 08:45:47 divy3993

@SureshMali，我很好奇你爲什麼選擇了一個硬編碼JS中特定標題值的答案，而不是一個與你在HTML中恰好具有的任何標題值一起工作的答案。如果您的HTML被修改，硬編碼選項的靈活性會降低很多，並且需要更多的工作來維護。一般來說，如果可能的話，你會希望你的JS自動處理對HTML的更改（在這種情況下就是這樣）。 – jfriend00

使用jQuery。獲取input的值並在option中搜索該值並設置該值。試着用 -

$('#program').val($('#program option[title=' + $('#fname').val() + ']').val())

來源

2015-06-05 08:24:29

假設你的問題意味着你要隱藏的不匹配標題用戶鍵入（因此只有匹配選項都在<select>可用）<option>標籤，你可以不喜歡它這個：

你可以監視對fname字段的更改，並在每次更改時查看fname字段的當前值是否與任何標題匹配，如果是，則隱藏不匹配的選項，只留下匹配選項。如果沒有匹配，則顯示所有選項。

$("#fname").on("input", function() { 
    var option; 
    if (this.value) { 
     var sel = $("#program"); 
     option = sel.find('option[title="' + this.value + '"]'); 
    } 
    if (option && option.length) { 
     // show only the matching options 
     sel.find("option").hide(); 
     option.show(); 
    } else { 
     // show all options 
     sel.find("option").show(); 
    } 
});

來源

2015-06-05 08:27:51 jfriend00

嘗試......

<input type="text" name="fname" value="" id="fname"> 

     <select name="program" id="program"> 
     <option>Select Program Type</option> 
     <option value="1" title="value01">1</option> 
     <option value="2" title="value01">2</option> 
     <option value="1" title="value02">1</option> 
     <option value="2" title="value02">2</option> 
     <option value="1" title="value03">1</option> 
     <option value="2" title="value03">2</option> 
     </select> 
    $('#fname').on('blur', function(){ 
var value=$("#fname").val();  

    $('#program').val($('#program option[title=' + value + ']').val()); 


});

演示：https://jsfiddle.net/qrecL29u/2/

來源

2015-06-05 08:31:53

試試這個。它禁用所有選項。並添加從輸入字段中輸入的新選項。在輸入字段中輸入值之後，您需要按回車。

$(document).ready(function() { 
 

 
    $('#fname').bind('keypress', function(e) { 
 

 
    var code = e.keyCode || e.which; 
 
    if (code == 13) { //Enter keycode 
 

 
     $("#program").append($('<option/>', { 
 
     value: $("#fname").val(), 
 
     title: $("#fname").val(), 
 
     text: $("#fname").val() 
 
     })); 
 
     $("#program option[value!=" + $("#fname").val() + "]").attr('disabled', true); 
 
    } 
 

 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" name="fname" value="" id="fname"> 
 

 
<select name="program" id="program"> 
 
    <option>Select Program Type</option> 
 
    <option value="1" title="value01">1</option> 
 
    <option value="2" title="value01">2</option> 
 
    <option value="1" title="value02">1</option> 
 
    <option value="2" title="value02">2</option> 
 
    <option value="1" title="value03">1</option> 
 
    <option value="2" title="value03">2</option> 
 
</select>

來源

2015-06-05 08:36:31 Alex

而且沒有jQuery的

var field = document.getElementById('fname'), 
 
    select = document.getElementById('program'); 
 
field.addEventListener('keyup', function(evt) { 
 
    for (var i = 0; i < select.children.length; i++) { 
 
    if (select.children[i].title !== field.value) select.children[i].style.display = 'none'; 
 
    else select.children[i].style.display = 'block'; 
 
    } 
 
});

<input type="text" name="fname" value="" id="fname"> 
 
<select name="program" id="program"> 
 
    <option>Select Program Type</option> 
 
    <option value="1" title="value01">1</option> 
 
    <option value="2" title="value01">2</option> 
 
    <option value="1" title="value02">1</option> 
 
    <option value="2" title="value02">2</option> 
 
    <option value="1" title="value03">1</option> 
 
    <option value="2" title="value03">2</option> 
 
</select>

來源

2015-06-05 08:37:46

根據輸入值更改選項值

回答

相關問題