JQuery와 내가이 일 것 을 선택하는 옵션을 추가 할 jQuery를 사용하는 옵션

Question

후 선택 옵션을 추가하지만 난 선택 옵션이

을 apeend 후이 숨겨져 내가 HTML에 추가 할 때 선택한 후

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

를 추가하려면

<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

. 따라서 하드 코딩 된 옵션이 <option value="0">choose category</option> 인 경우 새 옵션이 추가되기 전에 제거됩니다.

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

나는 당신이 원하는 것이 맞는지 확인해 보았습니다.

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(); 

     } 
    }); 
});