Question

我想为我的网站创建一个高级搜索框。我使用“下拉框”和“文本框1”来获取两者值并在另一个“文本框”中显示它们以在网站中开始我的搜索。

我正在使用jquery来实现这一点。但我不能在同一个“文本框”中显示这两个值。它只显示“文本值或下拉值” /我想展示他们两个** [提前搜索框] **

谢谢大家。

但我还需要您的帮助，在“搜索框”中，搜索框默认有取消按钮。但它不符合我的形式。我希望取消按钮出现在text-box1和text-box2，任何人都可以申请取消图像并为我做一个演示谢谢

$(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旁边单击“图像”时显示同时显示下拉值和文本值的功能。任何人都可以帮助我

先谢谢

Answer 1

仅使用$('#drop').val()这会为您提供selected option值。使用此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);
});

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

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

希望它有用

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

3 个答案: