【jQuery系列之插件】jQuery插件---exselect实现联动
生活随笔
收集整理的這篇文章主要介紹了
【jQuery系列之插件】jQuery插件---exselect实现联动
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE HTML>
<html>
<head><meta charset="utf-8"><title>cxSelect 聯動下拉菜單 </title><style>body{background:#ddd;font:14px/1.7 tahoma,'\5fae\8f6f\96c5\9ed1',sans-serif;}fieldset{margin:2em 0;}fieldset legend{font-weight:bold;font-size:16px;line-height:2;}select,button{padding:0.5em;}.wrap{width:900px;margin:0 auto;padding:20px 50px;border-radius:8px;background:#fff;box-shadow:0 0 10px rgba(0,0,0,0.2);}</style>
</head>
<body>
<div class="wrap"><fieldset><legend>級聯測試</legend><div id="api_data"><dl><dt>選擇器組 A</dt><dd><span>第一級</span> <select class="first select"></select><span>第二級</span> <select class="second select"></select><span>第三級</span> <select class="thrid select"></select></dd></dl></div></fieldset></div><script src="http://cdn.staticfile.org/jquery/1.11.3/jquery.min.js"></script>
<script src="js/jquery.cxselect.js"></script>
<script>(function() {var dataCustom = [{'v': '1', 'n': '第一級 >', 's': [{'v': '2', 'n': '第二級 >', 's': [{'v': '3', 'n': '第三級 >', 's': [{'v': '4', 'n': '第四級 >', 's': [{'v': '5', 'n': '第五級 >', 's': [{'v': '6', 'n': '第六級 >'}]}]}]}]}]},{'v': 'test number', 'n': '測試數字', 's': [{'v': 'text', 'n': '文本類型', 's': [{'v': '4', 'n': '4'},{'v': '5', 'n': '5'},{'v': '6', 'n': '6'},{'v': '7', 'n': '7'},{'v': '8', 'n': '8'},{'v': '9', 'n': '9'},{'v': '10', 'n': '10'}]},{'v': 'number', 'n': '數值類型', 's': [{'v': 11, 'n': 11},{'v': 12, 'n': 12},{'v': 13, 'n': 13},{'v': 14, 'n': 14},{'v': 15, 'n': 15},{'v': 16, 'n': 16},{'v': 17, 'n': 17}]}]},{'v': '' , 'n': '無子級'}];// API 接口var apiBox = $('#api_data');var cxSelectApi;apiBox.cxSelect({selects: ['first', 'second', 'thrid'] //下拉選擇框組，輸入select的class屬性}, function(api) {cxSelectApi = api;});$(".first").on('mouseover',function(){cxSelectApi.setOptions({data: dataCustom});})})();
</script>
</body>
</html>
?
項目中應用：
1 <script> 2 (function() { 3 var dataCustom = [ 4 {'v': '1', 'n': '崗位調動', 's': [ 5 {'v': 4, 'n': '平調'}, 6 {'v': 5, 'n': '升級'}, 7 {'v': 6, 'n': '降級'}, 8 ]}, 9 {'v': '2', 'n': '辭職', 's': [ 10 {'v': 7, 'n': '崗位原因'}, 11 {'v': 8, 'n': '居住環境'}, 12 {'v': 9, 'n': '工作原因'}, 13 {'v': 10, 'n': '薪酬原因'}, 14 {'v': 11, 'n': '職業發展'}, 15 {'v': 12, 'n': '個人原因'}, 16 {'v': 13, 'n': '其他'} 17 ]}, 18 {'v': '3', 'n': '解聘', 's': [ 19 {'v': 11, 'n': '能力不足'}, 20 {'v': 12, 'n': '違反公司規章制度'}, 21 {'v': 13, 'n': '業務調整'}, 22 {'v': 14, 'n': '違法犯罪'}, 23 {'v': 15, 'n': '其他'} 24 ]} 25 ]; 26 27 var apiBox = $('#type_reason'); 28 var cxSelectApi; 29 30 apiBox.cxSelect({ 31 selects: ['first', 'second'] 32 }, function(api) { 33 cxSelectApi = api; 34 }); 35 36 $(".first").on('mouseover',function(){ 37 cxSelectApi.setOptions({ 38 data: dataCustom 39 }); 40 }) 41 42 })(); 43 </script>我們還可以在cxSelectApi.setOptions({
data:dataCustom,
jsonValue: 'v'
})
來設置選項的value值，如果不設置的話會默認使用jsonName作為jsonValue。
可用的選項有：
1 $.cxSelect.defaults = { 2 selects: [], // 下拉選框組 3 url: null, // 列表數據文件路徑（URL）或數組數據 4 data: null, // 自定義數據 5 emptyStyle: null, // 無數據狀態顯示方式 6 required: false, // 是否為必選 7 firstTitle: '請選擇', // 第一個選項的標題 8 firstValue: '', // 第一個選項的值 9 jsonSpace: '', // 數據命名空間 10 jsonName: 'n', // 數據標題字段名稱 11 jsonValue: '', // 數據值字段名稱 12 jsonSub: 's' // 子集數據字段名稱 13 };?
轉載于:https://www.cnblogs.com/dream-to-pku/p/5916939.html
總結
以上是生活随笔為你收集整理的【jQuery系列之插件】jQuery插件---exselect实现联动的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： VC编辑框（EDIT）的自动换行、自动滚
- 下一篇： 类模板特化之经典（一）