jquery append sélectionnez l'option après l'option

Question

i utilise jquery pour ajouter l'option pour sélectionner il a travaillé, mais je veux ajouter

<option value="0">choose category</option> 

après tout sélectionné quand je l'ajoute en html, il est caché après sélectionnez l'option apeend

<script type="text/javascript"> 
$(document).ready(function() { 
    $('select[name="cat"]').on('change', function() { 
     $('select[name="subcat"]').removeClass('hidden'); 
     $('select[name="subcat2"]').addClass('hidden'); 
     //$('select[name="subcat2"]').find('option').remove().end(); 
     var stateID = $(this).val(); 
     if(stateID) { 
      $.ajax({ 
       url: '{{ url('getCat') }}/'+stateID, 
       type: "GET", 
       dataType: "json", 
       success:function(data) { 
        $('select[name="subcat"]').empty(); 
        $.each(data, function(key, value) { 
         $('select[name="subcat"]').append('<option value="'+ key +'">'+ value +'</option>'); 
        }); 
       } 
      }); 
     }else{ 
      $('select[name="subcat"]').empty(); 

     } 
    }); 
}); 

Answer 1

C'est parce que vous appelez la fonction vide avant d'ajouter. Donc, si vous avez l'option codée en dur <option value="0">choose category</option>, elle sera supprimée avant l'ajout de nouvelles options.

success:function(data) { 
        $('select[name="subcat"]').empty(); 
        $('select[name="subcat"]').append('<option value="0">choose category</option>'); 
        $.each(data, function(key, value) { 
         $('select[name="subcat"]').append('<option value="'+ key +'">'+ value +'</option>'); 
        }); 
       } 

Answer 2

J'ai fait une simulation de votre problème, voir si c'est ce que vous voulez?

Link jsfiddle

html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<select name="cat"> 
    <option value="0">choose category</option> 
    <option value="1">Cat 1</option> 
    <option value="2">Cat 2</option> 
</select> 
<select name="subcat" style="display:none"> 
</select> 

JS

$(document).ready(function() { 
    $('select[name="cat"]').on('change', function() { 
     //$('select[name="subcat"]').removeClass('hidden'); 
     //$('select[name="subcat2"]').addClass('hidden'); 
     //$('select[name="subcat2"]').find('option').remove().end(); 
     var stateID = $(this).val(); 
     if(stateID) { 
      $.ajax({ 
         data: { 
        json: JSON.stringify({ 
         object: { 
          1: 'Sub cat 1', 
          2: 'Sub cat 2', 
          3: 'Sub cat 3', 
         } 
        }), 
        delay: 1 
       }, 
       url: '/echo/json/', 
       type: "POST", 
       dataType: "json", 
       success:function(data) { 
        $('select[name="subcat"]').empty(); 
        $('select[name="subcat"]').append('<option value="0">choose category</option>'); 
        $.each(data.object, function(key, value) { 
         $('select[name="subcat"]').append('<option value="'+ key +'">'+ value +'</option>'); 
        }); 
        $('select[name=subcat]').show(); 
       } 
      }); 
     }else{ 
      $('select[name="subcat"]').empty(); 

     } 
    }); 
});