Jquery select 嵌套依賴下拉式功能表 自動重新整理下屬屬性和表格

來源:互聯網
上載者:User
     <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" onclick="searchData();">查詢</a>                    </div>                                <div data-role="collapsible" id="collapsible-select">
    </div>  

...
..
..

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.