首頁 > 開發者 > JavaScript
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> <title>三級聯動多選下拉框</title> <script src="<?php echo base_url() ?>js/jquery-1.7.2.min.js"></script> <link href="<?php echo base_url(); ?>css/buildfair/jquery-ui.css" rel="stylesheet" /> <script src="<?php echo base_url() ?>js/jquery-ui.min.js"></script> <script src="<?php echo base_url() ?>js/jquery.multiselect.min.js"></script> <script src="<?php echo base_url() ?>js/jquery.multiselect.zh-cn.js"></script> <link href="<?php echo base_url(); ?>css/buildfair/jquery.multiselect.css" rel="stylesheet"/> <script src="<?php echo base_url() ?>js/jquery.multiselect.filter.js"></script> <link href="<?php echo base_url(); ?>css/buildfair/jquery.multiselect.filter.css" rel="stylesheet"/> </head> <body> <div> <p>多選下拉框：</p> <select id="first_dist" multiple="multiple" data-level="1" style="display: none;"> <?php foreach ( $firstDist as $row ): ?> <option value="<?php echo $row[ 'id' ]; ?>"><?php echo $row[ 'name' ]; ?></option> <?php endforeach; ?> </select> <select id="second_dist" multiple="multiple" data-level="2" style="display: none;"> </select> <select id="third_dist" multiple="multiple" data-level="3" style="display: none;"> </select> <select id="fourth_dist" multiple="multiple" data-level="4" style="display: none;"> </select> <br/> </div> <div> <p>單選下拉框：</p> <select id="first_dist_single" style="display: none;"> <?php foreach ( $firstDist as $row ): ?> <option value="<?php echo $row[ 'id' ]; ?>"><?php echo $row[ 'name' ]; ?></option> <?php endforeach; ?> </select> </div> <div> <p>單選下拉框（帶搜尋功能）：</p> <select id="first_dist_single_filter" style="display: none;"> <?php foreach ( $firstDist as $row ): ?> <option value="<?php echo $row[ 'id' ]; ?>"><?php echo $row[ 'name' ]; ?></option> <?php endforeach; ?> </select> </div> </body> </html> <!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> <title>三級聯動多選下拉框</title> <script src="<?php echo base_url() ?>js/jquery-1.7.2.min.js"></script> <link href="<?php echo base_url(); ?>css/buildfair/jquery-ui.css" rel="stylesheet" /> <script src="<?php echo base_url() ?>js/jquery-ui.min.js"></script> <script src="<?php echo base_url() ?>js/jquery.multiselect.min.js"></script> <script src="<?php echo base_url() ?>js/jquery.multiselect.zh-cn.js"></script> <link href="<?php echo base_url(); ?>css/buildfair/jquery.multiselect.css" rel="stylesheet"/> <script src="<?php echo base_url() ?>js/jquery.multiselect.filter.js"></script> <link href="<?php echo base_url(); ?>css/buildfair/jquery.multiselect.filter.css" rel="stylesheet"/> </head> <body> <div> <p>多選下拉框：</p> <select id="first_dist" multiple="multiple" data-level="1" style="display: none;"> <?php foreach ( $firstDist as $row ): ?> <option value="<?php echo $row[ 'id' ]; ?>"><?php echo $row[ 'name' ]; ?></option> <?php endforeach; ?> </select> <select id="second_dist" multiple="multiple" data-level="2" style="display: none;"> </select> <select id="third_dist" multiple="multiple" data-level="3" style="display: none;"> </select> <select id="fourth_dist" multiple="multiple" data-level="4" style="display: none;"> </select> <br/> </div> <div> <p>單選下拉框：</p> <select id="first_dist_single" style="display: none;"> <?php foreach ( $firstDist as $row ): ?> <option value="<?php echo $row[ 'id' ]; ?>"><?php echo $row[ 'name' ]; ?></option> <?php endforeach; ?> </select> </div> <div> <p>單選下拉框（帶搜尋功能）：</p> <select id="first_dist_single_filter" style="display: none;"> <?php foreach ( $firstDist as $row ): ?> <option value="<?php echo $row[ 'id' ]; ?>"><?php echo $row[ 'name' ]; ?></option> <?php endforeach; ?> </select> </div> </body></html>
<script> (function() { // 預設只顯示選擇了的3個 var DEF_SHOW_SELELCTED_NUMBER = 3; $("#first_dist_single").multiselect({ multiple: false, header: "選擇一項", selectedList: 1 }); $("#first_dist_single_filter").multiselect({ multiple: false, noneSelectedText: "請選擇", selectedList: 1 }).multiselectfilter(); $("#first_dist").multiselect({ selectedList: DEF_SHOW_SELELCTED_NUMBER, noneSelectedText: '請選擇省市', close: function(event, ui) { showNextDist($(this)); } } ); var showNextDist = function(obj) { var level = obj.data('level'), nextLevel = parseInt(level) + 1, nextDistNode = null, defaultText = ''; if (parseInt(nextLevel) === 2) { nextDistNode = $('#second_dist'); defaultText = '請選擇市縣'; } else if (parseInt(nextLevel) === 3) { nextDistNode = $('#third_dist'); defaultText = '請選擇地級市'; } else if (parseInt(nextLevel) === 4) { nextDistNode = $('#fourth_dist'); defaultText = '請選擇區鎮'; } var selectedArr = obj.multiselect("getChecked").map(function() { return this.value; }).get(); var selectedVal = selectedArr.join(','); if (selectedVal !== '') { var url = '<?php echo site_url(); ?>/m/buildfair/get_district'; $.post(url, {upid: selectedVal, level: nextLevel}, function(data) { if (data.success) { var srcData = data.data; if (nextDistNode !== null && srcData.length > 0) { nextDistNode.html(''); for (index in srcData) { var opt = srcData[index] nextDistNode.append('<option value="' + opt.id + '">' + opt.name + '</option>'); } nextDistNode.multiselect({ selectedList: DEF_SHOW_SELELCTED_NUMBER, noneSelectedText: defaultText, close: function(event, ui) { showNextDist(nextDistNode); } }).multiselect('refresh'); } } }, 'json'); } else { if (nextDistNode !== null) { nextDistNode.multiselect().multiselect("destroy").hide(); var nextDistLevel = nextDistNode.data('level'); if (parseInt(nextDistLevel) === 2) { $('#third_dist').multiselect().multiselect("destroy").hide(); $('#fourth_dist').multiselect().multiselect("destroy").hide(); } else if (parseInt(nextDistLevel) === 3) { $('#fourth_dist').multiselect().multiselect("destroy").hide(); } } } } })(); </script> <script> (function() { // 預設只顯示選擇了的3個 var DEF_SHOW_SELELCTED_NUMBER = 3; $("#first_dist_single").multiselect({ multiple: false, header: "選擇一項", selectedList: 1 }); $("#first_dist_single_filter").multiselect({ multiple: false, noneSelectedText: "請選擇", selectedList: 1 }).multiselectfilter(); $("#first_dist").multiselect({ selectedList: DEF_SHOW_SELELCTED_NUMBER, noneSelectedText: '請選擇省市', close: function(event, ui) { showNextDist($(this)); } } ); var showNextDist = function(obj) { var level = obj.data('level'), nextLevel = parseInt(level) + 1, nextDistNode = null, defaultText = ''; if (parseInt(nextLevel) === 2) { nextDistNode = $('#second_dist'); defaultText = '請選擇市縣'; } else if (parseInt(nextLevel) === 3) { nextDistNode = $('#third_dist'); defaultText = '請選擇地級市'; } else if (parseInt(nextLevel) === 4) { nextDistNode = $('#fourth_dist'); defaultText = '請選擇區鎮'; } var selectedArr = obj.multiselect("getChecked").map(function() { return this.value; }).get(); var selectedVal = selectedArr.join(','); if (selectedVal !== '') { var url = '<?php echo site_url(); ?>/m/buildfair/get_district'; $.post(url, {upid: selectedVal, level: nextLevel}, function(data) { if (data.success) { var srcData = data.data; if (nextDistNode !== null && srcData.length > 0) { nextDistNode.html(''); for (index in srcData) { var opt = srcData[index] nextDistNode.append('<option value="' + opt.id + '">' + opt.name + '</option>'); } nextDistNode.multiselect({ selectedList: DEF_SHOW_SELELCTED_NUMBER, noneSelectedText: defaultText, close: function(event, ui) { showNextDist(nextDistNode); } }).multiselect('refresh'); } } }, 'json'); } else { if (nextDistNode !== null) { nextDistNode.multiselect().multiselect("destroy").hide(); var nextDistLevel = nextDistNode.data('level'); if (parseInt(nextDistLevel) === 2) { $('#third_dist').multiselect().multiselect("destroy").hide(); $('#fourth_dist').multiselect().multiselect("destroy").hide(); } else if (parseInt(nextDistLevel) === 3) { $('#fourth_dist').multiselect().multiselect("destroy").hide(); } } } } })();</script>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
