js前臺控制select二級聯動,不是用Ajax對資料庫的時時查詢
阿新 • • 發佈:2019-02-09
最近做專案要用到二級連動,索性寫了小例子。大致分為兩種情況,一種是select選單是固定的,如省份與市區的連動。還有一種是select選單不是固定的,要按資料庫生成selec。
先以第一種為例。首先是頁面載入前先載入一個數組供select呼叫。
var selectTool = new Array(); window.onload=function(){//省略簡寫 selectTool[0] = new Array('1','保定','1');//陣列內分別為所屬省份的id,市名稱,市的id selectTool[1] = new Array('1','滄州','2'); selectTool[2] = new Array('1','秦皇島','3'); selectTool[3] = new Array('1','邯鄲','4'); selectTool[4] = new Array('2','鄭州','5'); selectTool[5] = new Array('2','商丘','6'); selectTool[6] = new Array('2','洛陽','7'); selectTool[7] = new Array('2','開封','8'); }
然後是select框:
<select id="bigSelect" onchange="showNext()">
<option value=''>--請選擇--</option>
<option value='1'>河北</option>
<option value='2'>河南</option>
</select>
<select id="sonSelect"></select>
js控制的方法是
function showNext(){ var big = document.getElementById("bigSelect").value; document.getElementById("sonSelect").length = 0; document.getElementById("sonSelect").options.add(new Option("--請選擇--","")); for (i=0;i<selectTool.length;i++){ if (selectTool[i][0] == big){ document.getElementById("sonSelect").options.add(new Option(selectTool[i][1],selectTool[i][2])); } } }
如過select選單非固定的。可用request傳遞一個後臺調取的List到前臺。迴圈輸出成陣列
針對Java為
<%List<YouObj> sonList = (List<YouObj>)request.getAttribute("soList"); %> var selectTool = new Array(); window.onload=function(){ <%for(int i=0;i<sonList.size();i++){ YouObj obj = sonList.get(i);%> selectTool[<%=i%>]=new Array('<%=obj.getSheng_id()%>','<%=obj.getShi_name()%>','<%=obj.getShi_id()%>') <%}%>}
此方法節省了Ajax不斷向後臺調取取資料查詢,但同樣缺點在於不能時刻更新。
Java學習交流群: 2177712