javascript - 通知 div 在匹配 jquery 中的字段时未显示

Question

我试图将文本框文本与下拉列表文本相匹配。当它匹配时，它从下拉列表中选择选项。我想在文本与下拉列表不匹配时显示通知，当它匹配时应该隐藏通知。问题是当它匹配时我无法隐藏它。这是我的 jquery。到目前为止，这是我尝试过的。

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


    if ($("#txt_scheme").val() == '' || $('#scheme option:selected').text().toLowerCase() == $("#txt_scheme").val()){
      $('#notify').hide(500);
    }
    else{
      $('#notify').show(500);
    }
    $("#scheme").val(valueFromText);
  });

<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">
      <option value="A">QC code</option>
      <option value="B">Analyte</option>
      <option value="B">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>
      <option value="I">Date</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 class="alert alert-danger" id='notify' style="display: none; width: 50%">
      <strong>Alert!</strong> Nothing matched select from dropdown
    </div>
  </div>
</div>

有什么帮助吗？

Answer 1

你只需要把选择:

$("#scheme").val(valueFromText);

在条件之前，所以 $('#scheme option:selected').text() 将返回正确的文本进行检查。

希望这对您有所帮助。

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

    $("#scheme").val(valueFromText);

    if ($("#txt_scheme").val() == '' || $('#scheme option:selected').text().toLowerCase() == $("#txt_scheme").val()){
      $('#notify').hide(500);
    }
    else{
      $('#notify').show(500);
    }
  });
});

<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">
      <option value="A">QC code</option>
      <option value="B">Analyte</option>
      <option value="B">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>
      <option value="I">Date</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 class="alert alert-danger" id='notify' style="display: none; width: 50%">
      <strong>Alert!</strong> Nothing matched select from dropdown
    </div>
  </div>
</div>