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

Question

I want to create a Advance search box for my site.I have used a "drop-down box" and a "text-box 1" to get both the values and show them in another "text-box" to start my search in the site.

I am using jquery to achieve this.But i can't show both the values in the same "text-box".It shows either only the "text value or drop-down value"/I want to show both of them**[advance search box]**

ADSearchbox image url

Thank You for everyone.

But i need one more help from you people that the search box is having cancellation button by default in "Search box". But it is not working in my form . I want the cancellation button to be appeared for text-box1 and text-box2 can anyone apply a cancellation image and give a demo for me thank you

$(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>

Note : I also want this function of getting both dropdown value and text value has to be show at the time of an "image" click next to textbox1. anyone can help me in this

Thanks in Advance

Answer 1

Only use $('#drop').val() this provide you the selected option value.Use this 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());
  });
});

if you want to perform this on the image click:

JS

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