手写三联动,避免重复追加的方法

    技术2022-07-12  80

    前端:

    <div data-toggle="distpicker" id="distpicker" style="width: 350px"> <select name="province" id="province" style="width: 100px"> <option value="">请选择</option> <volist name="res_storecate" id="res_storec"> <option <?php if($res_storec['id'] == $a_stor['id']){echo "selected";}?> value="{$res_storec.id}" > {$res_storec.cate_name} </option> </volist> </select> <select name="city" id="city" style="width: 100px"> <option value="{$a_stor.children.0.id}">{$a_stor.children.0.cate_name}</option> </select> <select name="county" id="county" style="width:100px"> <option value="{$a_stor.children.0.children.0.id}">{$a_stor.children.0.children.0.cate_name}</option> </select> </div>

    JS:

    <script> var html1 = '' $('#province').on('change',function () { var id = $(this).val(); $('#city').empty(); $('#county').empty(); $.ajax({ type:"post", url:"/Toadmin/Gbase/change_cate1", data: {id:id}, success:function(result){ if(result){ $.each(result,function (i,v) { html1 = '<option value="">请选择</option> ' + '<option value="'+v.id+'">'+v.cate_name+'</option>' $('#city').append(html1) }) } }, }); }) </script> <script> var html2 = '' $('#city').on('change',function () { var id2 = $(this).val(); $('#county').empty(); $.ajax({ type:"post", url:"/Toadmin/Gbase/change_cate2", data: {id:id2}, success:function(result2){ if(result2){ $.each(result2,function (ii,vi) { html2 = ' <option value="'+vi.id+'">'+vi.cate_name+'</option>' $('#county').append(html2) }) } }, }); }) </script>
    Processed: 0.014, SQL: 10