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