ajax的默认选择条件下拉选择 - default select on ajax conditional dropdown select

default select on ajax conditional dropdown select

本文关键字：选择条件下默认 ajax | 更新日期: 2023-09-27

需要帮助从我的条件下拉选择中设置默认选择选项。

这是我的第一个下拉选择

<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>

<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()之间的区别是什么?