24h購物| | PChome| 登入
2023-02-09 00:02:16| 人氣23| 回應0 | 上一篇 | 下一篇
推薦 0 收藏 0 轉貼0 訂閱站台

jQuery cxSelect 聯動下拉選單如何撈出預設值

  1. <select class="province" data-value="浙江省" data-required="false" data-first-title="选择省"></select>
複製代碼

 


利用方式载入 JavaScript 文件

  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>
複製代碼


参数说明




设置参数全局默认值

名称
默认值
说明
selects [] 下拉选框组。输入 select 的 className
url null 整合列表数据接口地址（URL）
每个选框的内容利用各自的接口地址，详见 [DEMO]
data null 自定义数据，类型为数组，数据利用 JSON 花式。[DEMO]
emptyStyle null 子集无数据时 select 的状态。可设置为："none"(display:none), "hidden"(visibility:hidden)
required false 是不是为必选。设为 false 时，会在列表头部添加 <option value="firstValue">firstTitle</option> 选项。
firstTitle '请选择' 选框第一个项目標标题（仅在 required 为 false 时有用）
firstValue '' 选框第一个项目標值（仅在 required 为 false 时有效）
jsonSpace '' 数据定名空间
jsonName 'n' 数据标题字段名称（用于 option 的标题）
jsonValue '' 数据值字段名称（用于 option 的 value，没有值字段时利用标题作为 value）
jsonSub 's' 子集数据字段名称
  1. <div id="element_id" data-url="cityData.min.json" data-selects="province,city,area" data-required="true"></div>
複製代碼



 

名称
说明
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.  
  8. <body>
  9. <?php
  10. include_once ('global.php');
  11. if (isset($_POST['update'])) {        
  12.                 //更新資料庫        
  13.                 $country = $_POST["country"];
  14.                 $state = addslashes($_POST["state"]);
  15.                 $city = addslashes($_POST["city"]);
  16.                 $region = addslashes($_POST["region"]);
  17.  
  18.                         $sql = "INSERT INTO net_area(country,state,city,region) VALUES('$country','$state','$city','$region')";
  19.           /*echo $sql = "UPDATE net_config SET
  20.                         country ='$country',
  21.                         state = '$state',
  22.                         city = '$city',
  23.                         region = '$region'";*/
  24.                 if (@mysql_query($sql)) {
  25.                         echo '<script>alert(\'新增完成！\');window.location=\'index1.php\';</script>';
  26.                 } else {
  27.                         echo '<script>alert(\'新增失敗！\');window.location=\'index1.php\';</script>';
  28.                 }
  29.         
  30. }
  31. $sql = @mysql_query("SELECT * FROM net_area WHERE aid='9'");
  32. $row = mysql_fetch_array($sql);
  33. $country = $row[country];
  34. $state = $row[state];
  35. $city = $row[city];
  36. $region = $row[region];
  37. ?>
  38. <form action="<?php $_SERVER['PHP_SELF'] ?>" method="post">
  39. <div class="wrap">
  40.   <h1>cxSelect 联动下拉菜单</h1>
  41.  
  42.       <div id="global_location">
  43.   
  44.     <legend>全球首要国家城市联动</legend>
  45.     <p>地點地区：
  46. <select class="country" data-first-title="选择国家" required></select>
  47. <select class="state" data-required="true"></select>
  48. <select class="city" data-required="true"></select>
  49. <select class="region" data-required="true" name="area"></select>
  50.     </p>
  51.   </div>
  52.   <button class="btn btn-primary" type="reset" name="reset">從新輸入</button> <button class="btn btn-success" type="submit" name="update">送出資料</button>
  53.   
  54.   
  55. </div>
  56. </form>
  57. <script src="http://cdn.staticfile.org/jquery/1.11.3/jquery.min.js"></script>
  58. <script src="js/jquery.cxselect.js"></script>
  59. <script>
  60. (function() {
  61.  
  62.   var urlGlobal = 'js/globalData.min.json';
  63.   
  64.   // 全球首要国家城市联动
  65.   $('#global_location').cxSelect({
  66.     url: urlGlobal,
  67.     selects: ['country', 'state', 'city', 'region'],
  68.     emptyStyle: 'none',
  69.  
  70.   });
  71.  
  72.   
  73.   
  74. })();
  75. </script>
  76.  
  77. </body>
  78. </html>
複製代碼
  1. data-value="<?php echo $country?>"
複製代碼
  1.  
複製代碼



本來

1.png


API 接口


在 <select> 元素上的 data- 属性


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

  1. <script src="jquery.js"></script>
  2. <script src="jquery.cxselect.js"></script>
複製代碼




设置默认值

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



调用

  1. $('#element_id').cxSelect({
  2.   url: 'cityData.min.json',               // 假如服务器不撐持 .json 类型文件，请将文件改为 .js 文件
  3.   selects: ['province', 'city', 'area'],  // 数组，请注意顺序
  4.   emptyStyle: 'none'
  5. });
複製代碼
名称
说明
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 子集数据字段名称



DOM 结构

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



 


data 属性参数在父元素上的 data- 属性

  1. var cxSelectApi;
  2. // 方式一：
  3. cxSelectApi = $.cxSelect($('#element_id'), {
  4.   selects: ['province', 'city', 'area']
  5. });
  6.  
  7. // 方式二：
  8. $('#element_id').cxSelect({
  9.   selects: ['province', 'city', 'area']
  10. }, function(api) {
  11.   cxSelectApi = api;
  12. });
複製代碼
  1. <!-- 方法一：利用 option 的 value 和 selected 属性 -->
  2. <select class="province">
  3.   <option value="浙江省" selected>浙江省</option>
  4. </select>
  5.  
  6. <!-- 方式二：使用 select 的 data-value 属性 -->
  7. <select class="province" data-value="浙江省"></select>
複製代碼

 

為資料庫撈出之預設值



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


該段落改成




測試代碼：網站架設

名称
说明
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 数据值字段名称


本文來自:

我要檢舉
台長： dennisnag2

您可能對以下文章有興趣

人氣(23) | 回應(0)| 推薦 (0)| 收藏 (0)| 轉寄
全站分類: 數位資訊(科技、網路、通訊、家電) | 個人分類: NetYea |
此分類下一篇:CKeditor 4.11.1 網頁編纂器與CKfinder
此分類上一篇:網站架設 CPanel 辦事器用transfer Tool對

我要回應
否 是 (若未登入"個人新聞台帳號"則看不到回覆唷!)
* 請輸入識別碼：
請輸入圖片中算式的結果(可能為0) 
(有*為必填)
TOP
詳全文