jQuery插件cxSelect多級聯(lián)動下拉菜單實例解析

更新時間：2016年06月24日 11:38:42 作者：Joyce-Luo

這篇文章主要為大家詳細解析了jQuery插件cxSelect多級聯(lián)動下拉菜單實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下

隨著電商的火爆，這多級聯(lián)動下拉菜單體現(xiàn)的更加充分，最明顯的就是地址的多級聯(lián)動下拉選擇，所以這里就簡單的分享一下
jQuery cxSelect 多級聯(lián)動下拉菜單
cxSelect 是基于 jQuery 的多級聯(lián)動菜單插件，適用于省市、商品分類等聯(lián)動菜單。

列表數(shù)據(jù)通過 AJAX 獲?。ㄐ枰诜掌鳝h(huán)境運行），也可以使用變量自定義，數(shù)據(jù)內(nèi)容使用 JSON 格式。

提供國內(nèi)省市縣數(shù)據(jù)（數(shù)據(jù)來源：basecss/cityData Date: 2014.03.31）

個人一直都有習慣，當有新知識點需要學習的時候，做得第一件事情絕對是看API，然后在看Demo！所以先把API附上：

接著來看看我寫的Demo吧，真的很簡單！??！直接上代碼：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
 <base href="<%=basePath%>">
 
 <title>jQuery_cxSelect</title>
 
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0"> 
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">
 <!--
 <link rel="stylesheet" type="text/css" href="styles.css">
 -->
 <script type="text/javascript" src="jquery/jquery-1.8.3.min.js"></script>
 <script type="text/javascript" src="js/jquery.cxselect.min.js"></script>
 </head>
 
 <body>
 <!-- 
 select 必須放在元素 id="element_id"（city） 的內(nèi)部，不限層級 
 select 的 class 任意取值，也可以附加多個 class，如 class="province otherclass"，在調(diào)用時只需要輸入其中一個即可，但是不能重復 
 如需設置 select 默認值，加上 data-value 屬性，例：<select class="province" data-value="浙江省"></select> 
 --> 
 <fieldset id="city">
 <legend>設置默認值及選項標題</legend>
 <p>所在地區(qū)：
 <select class="province" data-value="上海市" data-first-title="選擇省" disabled="disabled"></select>
 <select class="city" data-value="浦東新區(qū)" data-first-title="選擇市" disabled="disabled"></select>
 <select class="area" data-value="西湖區(qū)" data-first-title="選擇地區(qū)" disabled="disabled"></select>
 </p>
 </fieldset>
 </body>
 
 <script type="text/javascript">
 /* 使用 JSON 格式 
 * v : 設置 option 的值（可選項，未設置則使用 n） 
 * n : 設置 option 的文本 
 * s : 當前選項的子集 
 */
 $.cxSelect.defaults.url = "data/cityData.min.json";
 
 $("#city").cxSelect({
 selects : ["province", "city", "area"],
 nodata : "none"
 }); 
 </script>
</html>

這個時候當然少不了效果圖咯！