需要帮助从我的条件下拉选择中设置默认选择选项。
这是我的第一个下拉选择
<select name="category" id="category">
<option value="" disabled selected>Select category</option>
@foreach($categories as $cats)
<option value="{{$cats->id}}">{{$cats->name}}</option>
@endforeach
</select>
我的从属下拉菜单是这样的
<select name="product" id="product">
<option value=""></option>
</select>
JS
<script>
$('#category').on('change',function(e){
console.log(e);
var cat_id = e.target.value;
$.get('/products?cat_id=' + cat_id, function(data){
$('#product').empty();
$.each(data, function(index, subcatObj){
$('#product').append('<option value="'+subcatObj.id+'">'+subcatObj.name+'</option>');
});
});
});
</script>
对于一个简单的下拉选择,如类别,只需使用,它工作得很好,但我怎么能有这个默认选择产品下拉选择?
感谢您的帮助。
可以添加如下内容
$('#product').empty();
$('#product').append('<option value="" disabled selected>Select Product</option>');
});
$.each(data, function(index, subcatObj){
$('#product').append('<option value="'+subcatObj.id+'">'+subcatObj.name+'</option>');
});
我看到你已经使用了$('#product').empty();
,因此你包含的<option value=""></option>
被完全删除了,你把它放在你的html中。
你可以使用.html()而不是.append(),所以你不需要$('#product').empty();
作为.html()将覆盖你的dom。
然后你只需要把它放到html
<select name="product" id="product">
</select>
你的javascript会是这样的
<script>
$('#category').on('change',function(e){
console.log(e);
var cat_id = e.target.value;
var response = '';
$.get('/products?cat_id=' + cat_id, function(data){
response = '<option value="" disabled selected>Select Product</option>';
$.each(data, function(index, subcatObj){
response .= '<option value="'+subcatObj.id+'">'+subcatObj.name+'</option>';
});
$('#product').html(response);
});
});
</script>
你可以在这里找到.html()和.append()之间的区别。empty().append()和。html()之间的区别是什么?