Question

我通过在文本框中输入来设置下拉值。问题是我的下拉值与下拉列表中的选项文本不同。所以我必须在文本中键入每个选项的值，以便在下拉列表中获取正确的文本。如何通过在文本框中放置文本来选择文本。

$(document).ready(function(){
  $("#txt_scheme").keyup(function(){
     $("#scheme").val($("#txt_scheme").val());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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

并且QC代码中的字母值有A值。

因此，如果我在文本中输入QC code，则应从下拉列表中选择QC code。现在我输入A

来获取它

Answer 1

您应该使用filter函数来获取value文字的txt_scheme选项：

$(document).ready(function(){
    $("#txt_scheme").keyup(function(){
        var valueFromText=$("#scheme option").filter(function(i,option){
            return $(option).text()==$("#txt_scheme").val();
        }).val();
        $("#scheme").val(valueFromText);
    });
});

$("#txt_scheme").keyup(function(){
        var valueFromText=$("#scheme option").filter(function(i,option){
            return $(option).text().toLowerCase()==$("#txt_scheme").val().toLowerCase();
        }).val();
        $("#scheme").val(valueFromText);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="scheme">
   <option value="A">QC code</option> 
  <option value="B">Analyte</option>
  <option value="C">Assay Value </option>
  <option value="D">Assigned Value </option>
  <option value="E">STANDARDDEVIATION</option>
  <option value="F">ACCEPTABLEMIN</option>
  <option value="G">ACCEPTABLEMAX</option>
  <option value="H">Sample ID</option>
</select>
<input type="text" id="txt_scheme"/>

Answer 2

使用contains()按其文本值抓取select选项，然后将其selected属性设置为true：

var textValue = $("#txt_scheme").val();
$("select option:contains("+textValue+")").attr('selected', true);

如何使用jQuery

2 个答案: