JQuery добавить добавить вариант после варианта

я использую jquery, чтобы добавить опцию, чтобы выбрать
это сработало, но я хочу добавить

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

после любого выбранного
когда я добавляю его в html, он скрывается после выбора опции 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();

}
});
});

0

Решение

Это потому, что вы вызываете пустую функцию перед добавлением. Так что, если у вас есть жестко закодированный вариант <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>');
});
}
0

Другие решения

Я сделал симуляцию твоей проблемы, посмотри, хочешь ли ты этого?

Ссылка 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();

}
});
});
0

По вопросам рекламы ammmcru@yandex.ru
Adblock
detector