根据输入值更改选项值

我想根据输入值更改选项值。例如，如果我把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

根据输入值更改选项值

回答

相关问题