使用取消的 jquery 从文本框和下拉列表中获取值

Question

我想为我的 site.I 创建一个高级搜索框已经使用了 "drop-down box" 和 "text-box 1" 获取这两个值并将它们显示在另一个 "text-box" 以开始我在站点中的搜索。

我正在使用 jquery 来实现 this.But 我无法在同一个 "text-box" 中显示两个值。它只显示 "text value or drop-down value"/我要显示他们两个**[高级搜索框]**

ADSearchbox image url

谢谢大家。

但我还需要你们的帮助，搜索框在 "Search box" 中默认有取消按钮。但它不适用于我的表格。我希望取消按钮出现在文本框 1 和文本框 2 任何人都可以应用取消图像并给我演示谢谢

$(document).ready(function (){
$('#drop').change(function(){
var option = $(this).find('option:selected').val();
$('#search').val(option);
});
$('[name="2"]').change(function(){
$('#search').val($('#text').val());
});
 $('[name="1"],[name="2"]').change(function() {
 $('#search').val($('#drop').val(option)+''+$('#text').val());
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div style="background-color:white;width:100%;min-width:289px;margin-bottom:10px;padding:7px;">
  <form>
   <table>
   <tr>
   <td>
    <div class="form-group">
      <select id="drop" name="1" class="form-control">
         <option value="Policy No">Policy No</option>
         <option value="Claim No">Claim No</option>
         <option value="Account No">Account No</option>
         <option value="Client No">Client No</option>
       </select>
    </div>
    </td>
    <td>
    <div class="form-group">
        <input type="text" name="2"  value="" class="form-control" id="text" placeholder="textbox1">
    </div>
    </td>
   <td>
    <div class="form-group">
       <img src="img/logo/plus.png" height="25px" width="25px" style="margin-left:27%;">
    </div>
    </td>
    </tr>
  </table>
  </form>
 <form>
   <table>
   <tr>
   <td>
    <div class="form-group">
      <input type="search"   name="3" class="form-control" id="search"  placeholder="textbox2">
    </div>
    </td>
   <td>
    <div class="form-group">
       <button type="button"  class="btn btn-warning btn-xs" style="margin-left:4%;">GO</button>
    </div>
    </td>
    </tr>
  </table>
  </form>
</div>

注意：我还希望在单击 textbox1 旁边的 "image" 时必须显示同时获取下拉值和文本值的功能。任何人都可以在这方面帮助我

提前致谢

Answer 1

只使用 $('#drop').val() 这为您提供 selected option value.Use 这个 fiddle:

JS

$(document).ready(function() {
  $('#drop').change(function() {
    var option = $(this).find('option:selected').val();
    $('#search').val(option);
  });
  $('[name="2"]').change(function() {
    $('#search').val($('#text').val());
  });
  $('[name="1"],[name="2"]').change(function() {
    $('#search').val($('#drop').val() + '' + $('#text').val());
  });
});

如果你想在图像上执行此操作 click:

JS

$(document).ready(function() {
  $('img').on('click', function() {
    $('#search').val($('#drop').find(':selected').val() + '' + $('#text').val());
  });
});

Answer 2

你可以这样做：

$(document).ready(function () {
  
  $('#drop').on('change', function() {
    fillTextSearch();
  });
  
  $('#text').on('input', function() {
    fillTextSearch();
  });
  
  function fillTextSearch() {
    var option_txt = $("#drop").val();
    var searchVal = $('#text').val();
    $('#search').val(option_txt + ', ' + searchVal);
  }
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="background-color:white;width:100%;min-width:289px;margin-bottom:10px;padding:7px;">
  <form>
   <table>
   <tr>
   <td>
    <div class="form-group">
      <select id="drop" name="1" class="form-control">
        <option disabled selected>Select</option>
         <option value="Policy No">Policy No</option>
         <option value="Claim No">Claim No</option>
         <option value="Account No">Account No</option>
         <option value="Client No">Client No</option>
       </select>
    </div>
    </td>
    <td>
    <div class="form-group">
        <input type="text" name="2"  value="" class="form-control" id="text" placeholder="textbox1">
    </div>
    </td>
   <td>
    <div class="form-group">
       <img src="img/logo/plus.png" height="25px" width="25px" style="margin-left:27%;">
    </div>
    </td>
    </tr>
  </table>
  </form>
 <form>
   <table>
   <tr>
   <td>
    <div class="form-group">
      <input type="search"   name="3" class="form-control" id="search"  placeholder="textbox2">
    </div>
    </td>
   <td>
    <div class="form-group">
       <button type="button"  class="btn btn-warning btn-xs" style="margin-left:4%;">GO</button>
    </div>
    </td>
    </tr>
  </table>
  </form>
</div>

希望对您有所帮助！

Answer 3

这个怎么样：

$('.search_field').on("change",function(){
    search_value = $('#drop option:selected').html() + " " + $('#text').val();
    $('#search').val(search_value);
});

然后只需将 class search_field 添加到 <select> 框和 <input>。每当他们更改时，搜索字段都会更新。

这是一个演示：https://jsfiddle.net/324she75/3/

希望有用

使用取消的 jquery 从文本框和下拉列表中获取值

Get value from both text-box and drop-down using jquery with cancellation

jquery

search-box