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

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

来选择

＆＃13;

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

＆＃13;

选中此项，您将获得解决方案运行代码段并输入＆＃34;一个＆＃34;

＆＃13;

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

＆＃13;

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 个答案: