搜索下拉框级联

$('#cat_type').change(function(){
             
        var id = $(this).children('option:selected').val();

        $.appAjax({
                    url : basePath + "/combination/getBrandByCatId",
                    async : true,
                    cache : false,
                    data : {
                        "catId" : id
                    },
                    dataType : 'json',
                    success : function(result) {

                        var object = result.object;
                        if (result.success == 'true') {
                            var gdsBrandVOlist = object.gdsBrandVOlist;
                            $('#brand_type').empty();
                            $("#brand_type").append('<option value="">全部</option>');
                            $.each(gdsBrandVOlist, function(index, brand) {
                                        $('#brand_type')
                                                .append('<option value="'
                                                        + brand.brandId + '">'
                                                        + brand.brandName
                                                        + '</option>');
                                    });
                        } else {
                            WEB.msg.info("提示", obj.msg);
                        }
                    }
                });
         
         
     });
    
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
下拉框级联可以通过AJAX实现。具体实现步骤如下: 1. 在HTML页面中定义下拉框 ``` <select id="firstSelect" onchange="getSecondSelect()"> <option value="">请选择</option> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> </select> <select id="secondSelect"> <option value="">请选择</option> </select> ``` 2. 编写AJAX代码 ``` function getSecondSelect(){ var firstSelectValue = document.getElementById('firstSelect').value; var url = "getSecondSelect.php?firstSelectValue=" + firstSelectValue; //创建XMLHttpRequest对象 var xmlhttp; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } //发起AJAX请求 xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById('secondSelect').innerHTML = xmlhttp.responseText; } } xmlhttp.open("GET", url, true); xmlhttp.send(); } ``` 3. 编写后台PHP代码 ``` $firstSelectValue = $_GET['firstSelectValue']; $sql = "SELECT * FROM second_select WHERE first_select_value = $firstSelectValue"; $result = mysql_query($sql); while ($row = mysql_fetch_array($result)) { echo "<option value='" . $row['second_select_value'] . "'>" . $row['second_select_name'] . "</option>"; } ``` 以上代码完成了下拉框级联,当第一个下拉框的选项改变时,会发起AJAX请求,后台PHP代码会根据选项的值查询数据库,返回第二个下拉框的选项列表。前台JS代码会将返回的选项列表填充到第二个下拉框中。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值