Question

无论何时选择，我都会在项目中创建一个依赖项下拉列表父下拉列表显示其从属子下拉列表，但是当我更改父级下拉列表，所有子级下拉列表都与前一个父级混合在一起。

apt-get remove apparmor

控制器

<body>
<h1><p>Lab Cost</p></h1><br>
<div class="container">
    <div class="col-lg-3">
        <div class="form-group">
            <select name="labCat" id="labC" class="form-control">
                <option value="0" disabled="true" selected="true">Select Lab Category</option>
                    @if(isset($lab_category))
                        @foreach($lab_category as $lb)
                            <option value="{{$lb->lab_category_id}}">{{$lb->category_name}}</option>
                        @endforeach
                    @endif
            </select>
        </div>
        <div class="form-group">
            <select name="labSub" id="labS" class="form-control">
                <option value="0" disabled="true" selected="true">Select Lab Sub Category</option>
            </select>
        </div>
        <div class="form-group">
            <select name="labTest" id="labT" class="form-control">
                <option value="0" disabled="true" selected="true">Select Lab Test</option>
            </select>
        </div>
        <div class="col-md-2"><span id="loader"><i class="fa fa-spinner fa-3x fa-spin"></i></span></div>
    </div>

</div>
<div>
    <p id="testCost"></p>
</div>
<script>

$(document).ready(function() {

    $('#labC').on('change', function(){
        var labCategId = $(this).val();
        $('#labT').html('');
        $('#labT').append('<option value="0" disabled="true" selected="true">Select Lab Test</option>');
        if(labCategId) {
            $.ajax({
                processing : 'true',
                serverSide : 'true',
                url: 'get_lab_sub',
                type:"POST",
                data : {labCategId:labCategId,"_token":"{{ csrf_token() }}"},
                dataType:"json",

                success:function(data) {
                    if(data){
                        $.each(data, function(key, value){
                            $('#labS').append('<option value="'+value.lab_sub_category_id+'">' + value.sub_category_name + '</option>');

                        });
                    }else {
                        $('#labS').empty();
                    }

                },

            });
        } else {
            $('select[name="labS"]').empty();
        }

    });

    $('#labS').on('change' ,function () {
        var labSubId = $(this).val();   
        if(labSubId){
            $.ajax({
                processing : 'true',
                serverSide : 'true',
                depends : ['#labC'],
                url :'get_lab_sub_cat',
                type:"POST",
                data :{ labSubId:labSubId,"_token":"{{ csrf_token() }}"},
                dataType: "json",
                success:function (data) {
                    if(data){
                        $.each(data, function(key, value){
                            $('#labT').append('<option value="'+ value.lab_test_id +'">' + value.lab_name + '</option>');
                        });
                    }
                    else {
                        $('#labT').empty();
                    }
                }
            });
        }

    })
   $('#labT').on('change' ,function () {
        var lab_test_cost_id = $(this).val();
        if(lab_test_cost_id){
            $.ajax({
                processing : 'true',
                serverSide : 'true',

                url :'get_lab_cost_rs',
                type:"POST",
                data :{ labtid:lab_test_cost_id,"_token":"{{ csrf_token() }}"},
                dataType: "json",
                success:function (data) {
                    if(data){
                        $.each(data, function(key, value){
                            $('#testCost').append('<h5>The Lab Cost is </h5><p value="'+value.lab_test_id +'"> '+ value.cost + '</p>');
                        });
                    }
                }
            });
        }
    });

});
</script>
</body>

每当我更改父下拉列表时，以下2个子下拉列表均应重新显示，并在选择父类别时显示从属子下拉列表

Answer 1

尝试一下，我想这将是您的问题

<script>

    $(document).ready(function() {

        $('#labC').on('change', function(){
            var labCategId = $(this).val();
            $('#labS').html('');
            $('#labS').append('<option value="0" disabled="true" selected="true">Select Lab Sub Category</option>');
            $('#labT').html('');
            $('#labT').append('<option value="0" disabled="true" selected="true">Select Lab Test</option>');
            if(labCategId) {
                $.ajax({
                    processing : 'true',
                    serverSide : 'true',
                    url: 'get_lab_sub',
                    type:"POST",
                    data : {labCategId:labCategId,"_token":"{{ csrf_token() }}"},
                    dataType:"json",

                    success:function(data) {
                        if(data){
                            $.each(data, function(key, value){
                                $('#labS').append('<option value="'+value.lab_sub_category_id+'">' + value.sub_category_name + '</option>');

                            });
                        }else {
                            $('#labS').empty();
                        }

                    },

                });
            } else {
                $('select[name="labS"]').empty();
            }

        });

        $('#labS').on('change' ,function () {
            var labSubId = $(this).val();
           $('#labT').html('');
           $('#labT').append('<option value="0" disabled="true" selected="true">Select Lab Test</option>');

            if(labSubId){
                $.ajax({
                    processing : 'true',
                    serverSide : 'true',
                    depends : ['#labC'],
                    url :'get_lab_sub_cat',
                    type:"POST",
                    data :{ labSubId:labSubId,"_token":"{{ csrf_token() }}"},
                    dataType: "json",
                    success:function (data) {
                        if(data){
                            $.each(data, function(key, value){
                                $('#labT').append('<option value="'+ value.lab_test_id +'">' + value.lab_name + '</option>');
                            });
                        }
                        else {
                            $('#labT').empty();
                        }
                    }
                });
            }

        })
       $('#labT').on('change' ,function () {
            var lab_test_cost_id = $(this).val();
            if(lab_test_cost_id){
                $.ajax({
                    processing : 'true',
                    serverSide : 'true',

                    url :'get_lab_cost_rs',
                    type:"POST",
                    data :{ labtid:lab_test_cost_id,"_token":"{{ csrf_token() }}"},
                    dataType: "json",
                    success:function (data) {
                        if(data){
                            $.each(data, function(key, value){
                                $('#testCost').append('<h5>The Lab Cost is </h5><p value="'+value.lab_test_id +'"> '+ value.cost + '</p>');
                            });
                        }
                    }
                });
            }
        });

    });
    </script>

下拉列表不适用于父子选择

1 个答案: