jquery append select option after option - php

Question

i use jquery to append option to select
it's worked but i want add
<option value="0">choose category</option>
after any selected
when i add it in html it's hidden after select 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

That's because you are calling empty function before appending. So if you have hard coded option <option value="0">choose category</option> it will be removed before new options are added.
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

I made a simulation of your problem, see if that's what you want?
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();
}
});
});