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

2019-11-20 09:36:31

字體：大中小

供稿：網(wǎng)友

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

列表數(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）

個人一直都有習(xí)慣，當(dāng)有新知識點(diǎn)需要學(xué)習(xí)的時(shí)候，做得第一件事情絕對是看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)用時(shí)只需要輸入其中一個即可，但是不能重復(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>

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