<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>
..
..
Jquery select 嵌套依赖下拉菜单 自动刷新下属属性和表格
最新推荐文章于 2024-07-14 03:40:51 发布