title: Get value from both text-box and drop-down using jquery with cancellation
body: <p>I want to create a Advance search box for my site.I have used a <strong>"drop-down box"</strong> and a <strong>"text-box 1"</strong> to get both the values and show them in another <strong>"text-box"</strong> to start my search in the site.</p>
  
  <p>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 <strong>"text value or drop-down value"</strong>/I want to show both of them**[advance search box]**</p>
  
  <p><a href="https://i.stack.imgur.com/zpZXn.png" rel="nofollow noreferrer">ADSearchbox image url</a></p>
  
  <p>Thank You for everyone. </p>
  
  <p>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</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(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());
  });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div style="background-color:white;width:100%;min-width:289px;margin-bottom:10px;padding:7px;"&gt;
    &lt;form&gt;
     &lt;table&gt;
     &lt;tr&gt;
     &lt;td&gt;
      &lt;div class="form-group"&gt;
        &lt;select id="drop" name="1" class="form-control"&gt;
           &lt;option value="Policy No"&gt;Policy No&lt;/option&gt;
           &lt;option value="Claim No"&gt;Claim No&lt;/option&gt;
           &lt;option value="Account No"&gt;Account No&lt;/option&gt;
           &lt;option value="Client No"&gt;Client No&lt;/option&gt;
         &lt;/select&gt;
      &lt;/div&gt;
      &lt;/td&gt;
      &lt;td&gt;
      &lt;div class="form-group"&gt;
          &lt;input type="text" name="2"  value="" class="form-control" id="text" placeholder="textbox1"&gt;
      &lt;/div&gt;
      &lt;/td&gt;
     &lt;td&gt;
      &lt;div class="form-group"&gt;
         &lt;img src="img/logo/plus.png" height="25px" width="25px" style="margin-left:27%;"&gt;
      &lt;/div&gt;
      &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
    &lt;/form&gt;
   &lt;form&gt;
     &lt;table&gt;
     &lt;tr&gt;
     &lt;td&gt;
      &lt;div class="form-group"&gt;
        &lt;input type="search"   name="3" class="form-control" id="search"  placeholder="textbox2"&gt;
      &lt;/div&gt;
      &lt;/td&gt;
     &lt;td&gt;
      &lt;div class="form-group"&gt;
         &lt;button type="button"  class="btn btn-warning btn-xs" style="margin-left:4%;"&gt;GO&lt;/button&gt;
      &lt;/div&gt;
      &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
    &lt;/form&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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</p>
  
  <p>Thanks in Advance</p>