Question

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

这是我的第一个下拉选择

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

对于一个简单的下拉选择，就像第一类一样，只需使用它并且它工作正常，但我怎样才能对产品drowdown选择这个默认选择？

感谢任何帮助。

Answer 1

你可以追加这样的东西

 $('#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（）代替 .append（），这样您就不需要$('#product').empty();作为 .html（）< / strong>会覆盖你的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（）之间的区别What is the difference between .empty().append() and .html()?

默认选择ajax条件下拉列表选择

1 个答案: