title: How to avoid ajax result on select box
body: <p><a href="https://i.stack.imgur.com/gA1VE.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gA1VE.gif" alt="screen1"></a></p>
  
  <p>As you in sample above I have placeholder (option without value) to say eg. <code>Select Subcategory</code> but as soon as I change my category value result of subcategories will show.</p>
  
  <p>What I want is when I select category in subcategory dropdown still says <code>Select Subcategory</code> but under that be loaded result of chosen category. In simple words:</p>
  
  <blockquote>
    <p>Instead of showing results directly, shows placeholder option and
    results be under it.</p>
  </blockquote>
  
  <p>here is my codes:</p>
  
  <pre><code>// HTML
  &lt;label for="specification_id"&gt;specifications&lt;/label&gt;
    &lt;select name="specification_id" class="form-control"&gt;
      &lt;option value=""&gt;Select Specification&lt;/option&gt;
    &lt;/select&gt;
  
  // JAVASCRIPT
  
  &lt;script type="text/javascript"&gt;
    $(document).ready(function() {
      $('select[name="subcategory_id"]').on('change', function() {
        var subcategoryID = $(this).val();
        if(subcategoryID) {
        $.ajax({
          url: '{{ url('getspecifications') }}/'+encodeURI(subcategoryID),
          type: "GET",
          dataType: "json",
          success:function(data) {
          $('select[name="specification_id"]').empty();
          $.each(data, function(key, value) {
              $('select[name="specification_id"]').append(
                    "&lt;option class='form-control' value='"+ value['id'] +"'&gt;"+ value['title'] +"&lt;/option&gt;"
                    );
              });
          }
        });
        }else{
          $('select[name="specification_id"]').empty();
        }
      });
    });
  &lt;/script&gt;
  </code></pre>