如何通过在文本框中插入值来选择下拉菜单

Question

您好我有一个下拉列表，它是从数据库中获取数据。 忘了数据库，我在下拉选择前面有一个文本框。 逻辑是，如果我输入文本，则如果从文本中键入的值与下拉列表中的值不匹配，则应从下拉列表中自动选择值，然后用户可以选择下拉列表。 任何帮助将非常感激。

这是我的html代码！

<div class="form-group">
                <label class="col-sm-4 control-label">Scheme**</label>
                <div class="col-sm-4">
                    <select class="form-control" name="scheme" id="scheme">
                        <?php
                        for ($column = 'A'; $column <= $lastcol; $column++) {
                            echo '<option value="' . $column . '">' . $worksheet->getCell($column . '1')->getValue() . '</option>';
                        }
                        ?>
                    </select>
                </div>
                <div class="col-sm-4">
                    <input type="text" class="form-control" id="txt_scheme" name="txt_scheme" placeholder="Or Type here">
                </div>
            </div>

在下拉菜单中，即时获取这些值

QC code 
Analyte 
Assay Value 
Assigned Value  
STANDARDDEVIATION   
ACCEPTABLEMIN   
ACCEPTABLEMAX   
Sample ID   
Date

Answer 1

试试此代码，然后您可以根据需要进行修改。

$("#product").on("change keyup paste", function(){ 
    var valuefound =''; 
    $("#platformid option").each(function(i){
      if($(this).text().substring(0, 2).toLowerCase()==$("#product").val().substring(0, 2).toLowerCase() ){ valuefound = $(this).val(); } }); 
   $('option:selected', 'select[name="platformid"]').removeAttr('selected'); $('#platformid option[value="' + valuefound + '"]').prop('selected', true); })

在这里工作提琴https://jsfiddle.net/8xfqeb9y/

Answer 2

<label for="">Enter Value</label>
<input type="text" class="textVal">
<select name="" id="listItems">
</select>


var listItems = ["One","Two","Three","Four","Five","Six"];

for (var i = 0; i < listItems.length; i++) {
  console.log(listItems[i]);
  $("#listItems").append("<option>" + listItems[i] + "</option>")
}

$(".textVal").on("focusout",function(){
  for (var i = 0; i < listItems.length; i++) {
    console.log(listItems[i]);
    if(listItems[i] == $(this).val()) {
        $("#listItems").val($(this).val());
    }    
  }
})

Answer 3

现在检查值和文本是否不同，您甚至可以通过键入一个来立即选择

 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#txtselect").keyup(function(){ $("#selbox > option").each(function() { if($(this).text()==$("#txtselect").val()) { $(this).attr('selected', 'selected'); } }); }); }); </script> </head> <body> <select id="selbox"> <option val="select">select</option> <option val="123">one</option> <option val="abc">two</option> <option val="23sfd">three</option> <option val="27345">four</option> </select> <input type="text" id="txtselect"/> </body> </html>

检查此内容，您将获得解决方案运行摘要，然后键入“ one”

 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#txtselect").keyup(function(){ $("#selbox").val($("#txtselect").val()); }); }); </script> </head> <body> <select id="selbox"> <option val="select">select</option> <option val="one">one</option> <option val="two">two</option> <option val="three">three</option> <option val="four">four</option> </select> <input type="text" id="txtselect"/> </body> </html>

Answer 4

尝试这个

<script type="text/javascript">
    function getselected(elem)
    {
        var textvalue = $(elem).val();
        if(textvalue != '')
        {
            $('select').removeAttr('disabled');
            $('select option').removeAttr('selected');
            $('select option').each(function(){
                if ($(this).html().indexOf(textvalue) > -1)
                {
                    $('select').val($(this).attr('value'));
                }
            });
        }
        else
        {
            $('select').val('');
            $('select').attr('disabled','disabled');
        }                
    }
</script>

<input type="text" name="name" value="" onkeydown="getselected(this)">
<select disabled="disabled">
    <option value="">Select</option>
    <option value="1">QC code</option>
    <option value="2">Analyte</option>
    <option value="3">Assay Value</option> 
    <option value="4">Assigned Value</option>  
    <option value="5">STANDARDDEVIATION</option>  
    <option value="6">ACCEPTABLEMIN</option>   
    <option value="7">ACCEPTABLEMAX</option>   
    <option value="8">Sample ID</option>
    <option value="9">Date</option>
</select>

如何通过在文本框中插入值来选择下拉菜单

问题描述

4 个解决方案

解决方案1
3 2017-02-08 12:38:27

解决方案2
2 已采纳 2017-02-08 12:00:02

解决方案3
1 2017-02-08 12:51:33

解决方案4
0 2017-02-08 12:46:19

如何通过在文本框中插入值来选择下拉菜单

问题描述

4 个解决方案

解决方案1 3 2017-02-08 12:38:27

解决方案2 2 已采纳 2017-02-08 12:00:02

解决方案3 1 2017-02-08 12:51:33

解决方案4 0 2017-02-08 12:46:19

解决方案1
3 2017-02-08 12:38:27

解决方案2
2 已采纳 2017-02-08 12:00:02

解决方案3
1 2017-02-08 12:51:33

解决方案4
0 2017-02-08 12:46:19