# 頂部導航 * 裝載方式 ~~~ head.append(sbh_include_css('mui/css/mui.picker')); head.append(sbh_include_css('mui/css/mui.poppicker')); <script type="text/javascript" src="../../../../include/1.1.0/mui/mui.picker.js"></script> <script type="text/javascript" src="../../../../include/1.1.0/mui/mui.poppicker.js"></script> ~~~ * HTML部分 ~~~ <div class="nav_4" id="region_obj"> <div>所在地區</div> <div id="region_result"></div> <div><i class="v8 sbh-icon_on_the_right"></i></div> </div> <input type="hidden" name="region_value" id="region_value" note="所在地區" limit="1" /> ~~~ * HTML參數設置 ~~~ 1. id ~~~ * js部分 ~~~ (function($, doc) { $.init(); $.ready(function() { var _getParam = function(obj, param) { return obj[param] || ''; }; /*三級聯動*/ var Picker = new $.PopPicker({ layer: 3 }); var addInfo = document.getElementById("addInfo").value; addInfo = JSON.parse(addInfo); Picker.setData(addInfo); var PickerButton = doc.getElementById('region_obj'); PickerButton.addEventListener('tap', function(event) { Picker.show(function(items) { var result_value = items[0].text + ' ' + items[1].text + (items[2].text ? ' ' + items[2].text : ''); var result_id = items[0].value + ',' + items[1].value + (items[2].value ? ',' + items[2].value : ''); /*顯示*/ doc.getElementById('region_result').innerText = result_value; /*賦值*/ doc.getElementById('region_value').value = result_value; doc.getElementById('region_id').value = result_id; }); }, false); /*默認選中值*/ var region_check = doc.getElementById('region_check').value; if(region_check){ region_check = region_check.split(','); Picker.pickers[0].setSelectedIndex(region_check[0]); Picker.pickers[1].setSelectedIndex(region_check[1]); Picker.pickers[2].setSelectedIndex(region_check[2]); } }); })(mui, document); ~~~