Question

我想根据输入值更改选项值。例如，如果我将value02放入输入中，则select应显示其他选项将隐藏的title="value02"选项。

＆＃13;

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

＆＃13;

请帮忙

Answer 1

使用jquery。获取input的值并在option中搜索该值并设置值。试试 -

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

Answer 2

假设您的问题意味着您要隐藏与用户输入的标题不匹配的<option>代码（因此只有<select>中的匹配选项可用），您可以这样做：

您可以监控对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();
    }
});

Answer 3

试试这个......

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

Answer 4

试试这个。它禁用所有选项。并添加从输入字段输入的新选项。在输入字段中输入值后，您需要按Enter键。

＆＃13;

$(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);
    }

  });

});

＆＃13;

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

＆＃13;

Answer 5

没有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>

Answer 6

我认为这是你要找的答案

WORKING:DEMO

<强> 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
    {
    }

});

根据输入值更改选项值

6 个答案: