快捷導(dǎo)航

jQuery插件cxSelect多級(jí)聯(lián)動(dòng)下拉菜單實(shí)例解析

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

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

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

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

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

個(gè)人一直都有習(xí)慣，當(dāng)有新知識(shí)點(diǎn)需要學(xué)習(xí)的時(shí)候，做得第一件事情絕對(duì)是看API，然后在看Demo！所以先把API附上：

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

<%@ 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)部，不限層級(jí) 
 select 的 class 任意取值，也可以附加多個(gè) class，如 class="province otherclass"，在調(diào)用時(shí)只需要輸入其中一個(gè)即可，但是不能重復(fù) 
 如需設(shè)置 select 默認(rèn)值，加上 data-value 屬性，例：<select class="province" data-value="浙江省"></select> 
 --> 
 <fieldset id="city">
 <legend>設(shè)置默認(rèn)值及選項(xiàng)標(biāo)題</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 : 設(shè)置 option 的值（可選項(xiàng)，未設(shè)置則使用 n） 
 * n : 設(shè)置 option 的文本 
 * s : 當(dāng)前選項(xiàng)的子集 
 */
 $.cxSelect.defaults.url = "data/cityData.min.json";
 
 $("#city").cxSelect({
 selects : ["province", "city", "area"],
 nodata : "none"
 }); 
 </script>
</html>

這個(gè)時(shí)候當(dāng)然少不了效果圖咯！