Jquery select 嵌套依赖下拉菜单 自动刷新下属属性和表格

     <script type="text/javascript">

$(function() {
        fillHead();
        $("#select-choice-1").change(function(){
        $("#select-choice-2").empty();
        $("#select-choice-2").append("<option value='' selected='selected'>请选择品牌</option>");
        $("#select-choice-2").selectmenu("refresh");
        fillSecond('select-choice-2',$("#select-choice-1").val());          
        });
        $("#select-choice-2").change(function(){
        $("#select-choice-3").empty();
        $("#select-choice-4").empty();
        $("#select-choice-3").append("<option value='' selected='selected'>请选择规格</option>");
        $("#select-choice-3").selectmenu("refresh");
        $("#select-choice-4").append("<option value='' selected='selected'>请选择售价</option>");
        $("#select-choice-4").selectmenu("refresh");
        fillSecond("select-choice-3",$("#select-choice-1").val(),$("#select-choice-2 :selected").text());
        fillSecond("select-choice-4",$("#select-choice-1").val(),$("#select-choice-2 :selected").text());
        });
            });
    function fillHead(){
        $.mobile.loading('show', {
            text: "正在加载数据,请稍候...",
            textVisible: true,
            theme: "a",
            textonly: false
        });
       $.ajax({
            type: "GET",
            timeout: 30000,
            url: "<%=basePath%>/ManagerTaskAct/getSupplierList.jspx",
        dataType : "json",        
        cache : false,
        error : function() {
            showPopupDialog("服务器错误 !");
        },
        success : function(data) {
        var list = eval(data);    
        for(var i = 0; i < list.length; i++){
                 $("#select-choice-1").append("<option value='"+list[i].SUPPLIER_CODE+"'>"+list[i].SUPPLIER_NAME+"</option>");
                 }
            },
                complete : function() {
                 $.mobile.loading('hide');
            }
        });
        }
        
function fillSecond(id,supCode,tradeMark){
        $.mobile.loading('show', {
            text: "正在加载数据,请稍候...",
            textVisible: true,
            theme: "a",
            textonly: false
        });
       $.ajax({
            type: "GET",
            timeout: 30000,
            url: "<%=basePath%>/ManagerTaskAct/getBrandInfo.jspx",
        dataType : "json",
        data : {
        "supCode" : supCode,
        "tradeMark" : tradeMark
                },        
        cache : false,
        error : function() {
            showPopupDialog("服务器错误 !");
        },
        success : function(data) {
            var list = eval(data);
            for(var i = 0; i < list.length; i++){
            if(id=="select-choice-2"){
            $("#"+id).append("<option value='"+list[i].BRAND_TRADEMARK+"'>"+list[i].BRAND_TRADEMARK+"</option>");
            }else if(id=="select-choice-3"){
            $("#"+id).append("<option value='"+list[i].BRAND_NAME+"'>"+list[i].BRAND_NAME+"</option>");
            }else if(id=="select-choice-4"){
            $("#"+id).append("<option value='"+list[i].TRADE_PRICE+"'>"+list[i].TRADE_PRICE+"</option>");
            }
                }
                    },
                complete : function() {
                    $.mobile.loading('hide');
            }
        });
        }
 function searchData() {
                $.mobile.loading('show', {
                    text: "正在加载数据,请稍候...",
                    textVisible: true,
                    theme: "a",
                    textonly: false,
                    html: ""
                });
               $.ajax({
                    type: "GET",
                    timeout: 30000,
                    url: "<%=basePath%>/ManagerTaskAct/getBrandInfo.jspx",
                    dataType : "json",
                    data:{
                        "supCode" : $("#select-choice-1").val(),
                        "tradeMark" : $("#select-choice-2 :selected").val(),
                        "brandName" : $("#select-choice-3 :selected").val(),
                        "price" : $("#select-choice-4 :selected").val()
                    },
                    cache : false,
                    error : function() {
                        showPopupDialog("服务器错误 !");
                    },
                    success : function(data) {
                        var list = JSON.parse(data);
                        var table = $("#ulTable");
                        for ( var i = 0; i < list.length; i++) {
                            document.getElementById("ulTable").innerHTML  = "";
                            table.append("<li><div style='padding: 0px 30px;'><h3>"
                                            + list[i].BRAND_NAME
                                            + "</h3><p style='color:grey;'><table style='color:grey;'><tr><td>"
                                            + list[i].PRODUCT_TYPE
                                            + "</td><td>"
                                            + list[i].PACK_TYPE
                                            + "</td><td>"
                                            + list[i].TRADE_PRICE
                                            + "</td></tr></table></p></div></li>");
                        }
                        table.listview('refresh');
                        $('#collapsible-select').trigger('expand');
                    },
                    complete : function() {
                        $.mobile.loading('hide');
                    }
                });
    }

</script>
   //...
            <div data-role="content" data-theme="d">
                <div data-role="collapsible-set" data-theme="b" data-content-theme="d">
                     <div data-role="collapsible" data-collapsed="false">
                         <h3>
                            查询
                        </h3>
                        <select name="select-choice-1" id="select-choice-1">
                            <option value="">
                                企业
                            </option>
                        </select>
                    <select name="select-choice-2" id="select-choice-2">
                        <option value="">
                            品牌
                        </option>
                    </select>
                    <div class="ui-grid-a">
                    <div class="ui-block-a">
                            <select name="select-choice-3" id="select-choice-3">
                                <option value="">
                                    规格
                                </option>
                            </select>
                    </div>
                    <div class="ui-block-b">
                            <select name="select-choice-4" id="select-choice-4">
                                <option value="">
                                    售价
                                </option>
                            </select>
                    </div>
                    </div>
                    <a class="search_btn"  data-role="button"
                        data-icon="search" data-iconpos="left" οnclick="searchData();">查询</a>
                    </div>            
                    <div data-role="collapsible" id="collapsible-select">
    </div>  
...
..
..



  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值