TShopping

 找回密碼
 註冊
搜索
查看: 394|回復: 0

[教學] jQuery cxSelect 聯動下拉選單如何撈出預設值

[複製鏈接]
發表於 2016-6-3 19:53:01 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk Push to Twitter 
cxSelect 是基於jQuery 的多級聯動菜單插件,適用於省市、商品分類等聯動菜單。
列表數據通過AJAX 獲取,也可以自定義,數據內容使用JSON 格式。
同時兼容Zepto,方便在移動端使用。
國內省市縣數據來源:basecss/cityData Date: 2014.03.31
全球主要城市數據來源:整理國內常用網站和軟件Date: 2014.07.29

版本:jQuery的V1.7 +的Zepto V1.0 +jQuery的cxSelect V1.4.0
使用方法载入 JavaScript 文件
  1. <script src="jquery.js"></script>
  2. <script src="jquery.cxselect.js"></script>
複製代碼


DOM 结构
  1. <!--
  2. select 必须放在元素 id="element_id" 的内部,不限层级
  3. select 的 class 任意取值,也可以附加多个 class,如 class="province otherclass",在调用时只需要输入其中一个即可,但是不能重复
  4. -->
  5. <div id="element_id">
  6.   <select class="province"></select>
  7.   <select class="city"></select>
  8.   <select class="area"></select>
  9. </div>
複製代碼



设置默认值
  1. <!-- 方法一:使用 option 的 value 和 selected 属性 -->
  2. <select class="province">
  3.   <option value="浙江省" selected>浙江省</option>
  4. </select>

  5. <!-- 方法二:使用 select 的 data-value 属性 -->
  6. <select class="province" data-value="浙江省"></select>
複製代碼


调用
  1. $('#element_id').cxSelect({
  2.   url: 'cityData.min.json',               // 如果服务器不支持 .json 类型文件,请将文件改为 .js 文件
  3.   selects: ['province', 'city', 'area'],  // 数组,请注意顺序
  4.   emptyStyle: 'none'
  5. });
複製代碼



设置参数全局默认值
  1. // 需在引入 <script src="jquery.cxselect.js"></script> 之后,调用之前设置
  2. $.cxSelect.defaults.url = 'cityData.min.json';
  3. $.cxSelect.defaults.emptyStyle = 'none';
複製代碼

参数说明
名称
默认值
说明
selects[]下拉选框组。输入 select 的 className
urlnull整合列表数据接口地址(URL)
每个选框的内容使用各自的接口地址,详见 [DEMO]
datanull自定义数据,类型为数组,数据使用 JSON 格式。[DEMO]
emptyStylenull子集无数据时 select 的状态。可设置为:"none"(display:none), "hidden"(visibility:hidden)
requiredfalse是否为必选。设为 false 时,会在列表头部添加 <option value="firstValue">firstTitle</option> 选项。
firstTitle'请选择'选框第一个项目的标题(仅在 required 为 false 时有效)
firstValue''选框第一个项目的值(仅在 required 为 false 时有效)
jsonSpace''数据命名空间
jsonName'n'数据标题字段名称(用于 option 的标题)
jsonValue''数据值字段名称(用于 option 的 value,没有值字段时使用标题作为 value)
jsonSub's'子集数据字段名称

data 属性参数在父元素上的 data- 属性
  1. <div id="element_id" data-url="cityData.min.json" data-selects="province,city,area" data-required="true"></div>
複製代碼

名称
说明
data-selects下拉选框组。输入 select 的 className,使用英文逗号分隔的字符串
data-url列表数据接口地址(此处只能设置 URL,自定义需要在参数中设置)
data-empty-style子集无数据时 select 的状态
data-required是否为必选
data-first-title选框第一个项目的标题
data-first-value选框第一个项目的值
data-json-space数据命名空间
data-json-name数据标题字段名称
data-json-value数据值字段名称
data-json-sub子集数据字段名称

在 <select> 元素上的 data- 属性
  1. <select class="province" data-value="浙江省" data-required="false" data-first-title="选择省"></select>
複製代碼



名称
说明
data-value默认选中值
data-url列表数据接口地址
data-required是否为必选
data-query-name传递上一个选框值的参数名称(默认使用上一个选框的 name 属性值)
data-first-title选框第一个项目的标题
data-first-value选框第一个项目的值
data-json-space数据命名空间
data-json-name数据标题字段名称
data-json-value数据值字段名称

API 接口
  1. var cxSelectApi;
  2. // 方法一:
  3. cxSelectApi = $.cxSelect($('#element_id'), {
  4.   selects: ['province', 'city', 'area']
  5. });

  6. // 方法二:
  7. $('#element_id').cxSelect({
  8.   selects: ['province', 'city', 'area']
  9. }, function(api) {
  10.   cxSelectApi = api;
  11. });
複製代碼



名称
说明
attach()绑定
调用时会自动进行绑定,用于使用detach解除绑定后,进行重新绑定。
detach()解除绑定
解除绑定后,不再具有联动效果。
clear(index)清空选项
清空第 index 个 select 自身及之后的 select 的选项。
index: select 的序号,从 0 开始。
setOptions(settings)重新设置参数settings: 与调用时参数一致。



測試代碼:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>無標題文件</title>
  6. </head>

  7. <body>
  8. <?php
  9. include_once ('global.php');
  10. if (isset($_POST['update'])) {        
  11.                 //更新資料庫        
  12.                 $country = $_POST["country"];
  13.                 $state = addslashes($_POST["state"]);
  14.                 $city = addslashes($_POST["city"]);
  15.                 $region = addslashes($_POST["region"]);

  16.                         $sql = "INSERT INTO net_area(country,state,city,region) VALUES('$country','$state','$city','$region')";
  17.           /*echo $sql = "UPDATE net_config SET
  18.                         country ='$country',
  19.                         state = '$state',
  20.                         city = '$city',
  21.                         region = '$region'";*/
  22.                 if (@mysql_query($sql)) {
  23.                         echo '<script>alert(\'新增完成!\');window.location=\'index1.php\';</script>';
  24.                 } else {
  25.                         echo '<script>alert(\'新增失敗!\');window.location=\'index1.php\';</script>';
  26.                 }
  27.         
  28. }
  29. $sql = @mysql_query("SELECT * FROM net_area WHERE aid='9'");
  30. $row = mysql_fetch_array($sql);
  31. $country = $row[country];
  32. $state = $row[state];
  33. $city = $row[city];
  34. $region = $row[region];
  35. ?>
  36. <form action="<?php $_SERVER['PHP_SELF'] ?>" method="post">
  37. <div class="wrap">
  38.   <h1>cxSelect 联动下拉菜单</h1>

  39.       <div id="global_location">
  40.   
  41.     <legend>全球主要国家城市联动</legend>
  42.     <p>所在地区:
  43. <select class="country" data-first-title="选择国家" required></select>
  44. <select class="state" data-required="true"></select>
  45. <select class="city" data-required="true"></select>
  46. <select class="region" data-required="true" name="area"></select>
  47.     </p>
  48.   </div>
  49.   <button class="btn btn-primary" type="reset" name="reset">重新輸入</button> <button class="btn btn-success" type="submit" name="update">送出資料</button>
  50.   
  51.   
  52. </div>
  53. </form>
  54. <script src="http://cdn.staticfile.org/jquery/1.11.3/jquery.min.js"></script>
  55. <script src="js/jquery.cxselect.js"></script>
  56. <script>
  57. (function() {

  58.   var urlGlobal = 'js/globalData.min.json';
  59.   
  60.   // 全球主要国家城市联动
  61.   $('#global_location').cxSelect({
  62.     url: urlGlobal,
  63.     selects: ['country', 'state', 'city', 'region'],
  64.     emptyStyle: 'none',

  65.   });

  66.   
  67.   
  68. })();
  69. </script>

  70. </body>
  71. </html>
複製代碼


global.php為MYSQL文件基本連線資料庫資訊


該段落改成
複製代碼
為資料庫撈出之預設值
  1. data-value="<?php echo $country?>"
複製代碼


原本
1.png
載入預設值
2.png
參考文章
http://code.ciaoca.com/jquery/cxSelect/
http://www.eshejie.com/effects/html/9.html

 

臉書網友討論
您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2016-12-8 21:50 , Processed in 0.062436 second(s), 25 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表