jq 地区(省市县区)联动菜单
                                                            生活随笔
收集整理的這篇文章主要介紹了
                                jq 地区(省市县区)联动菜单
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.                        
                                
                            
                            
                            <pre name="code" class="html"><pre name="code" class="php">4、地區數據下載地址http://download.csdn.net/detail/u011064186/76900893、ajax 部分public function actionAjax(){$id = $_GET['pid'];$sql = "select code,name from area where parentId = $id";$arr = Yii::app()->db->createCommand($sql)->queryAll();$arr = json_encode($arr);print_r($arr);}
2、html 部分<span><select name="province1" id="province1"><option value="-1">請選擇</option><option value="11">北京市</option><option value="12">天津市</option><option value="13">河北省</option><option value="14">山西省</option><option value="15">內蒙古自治區</option><option value="21">遼寧省</option><option value="22">吉林省</option><option value="23">黑龍江省</option><option value="31">上海市</option><option value="32">江蘇省</option><option value="33">浙江省</option><option value="34">安徽省</option><option value="35">福建省</option><option value="36">江西省</option><option value="37">山東省</option><option value="41">河南省</option><option value="42">湖北省</option><option value="43">湖南省</option><option value="44">廣東省</option><option value="45">廣西壯族自治區</option><option value="46">海南省</option><option value="50">重慶市</option><option value="51">四川省</option><option value="52">貴州省</option><option value="53">云南省</option><option value="54">西藏自治區</option><option value="61">陜西省</option><option value="62">甘肅省</option><option value="63">青海省</option><option value="64">寧夏回族自治區</option><option value="65">新疆維吾爾自治區</option><option value="71">臺灣省</option><option value="81">香港特別行政區</option><option value="82">澳門特別行政區</option></select> </span> <span id="c" style='display: none'><label for="city-proper">市</label><select name="city1" id="city"></select> </span> <span id="co"style='display: none'><label for="city-proper">縣區</label><select name="county1" id="county"></select> </span> <span id="to" style='display: none'><label for="city-proper">鄉鎮(街道)</label><select name="town1" id="town"></select> </span>
1、jq部分 <script>$(document).ready(function() {$('#province1').bind('change', function() {$("#c").css('display', 'inline-block');$("#to").css('display', 'none');$("#co").css('display', 'none');var pid = $(this).val();if (pid == '-1') {$("#c").css('display', 'none');}$.ajax({type: "get",url: "/index.php/site/ajax",data: {pid: pid,},success: function(json) {//alert(json);var data = eval('(' + json + ')');//json轉化為對象var str = "";for (var i = 0; i < data.length; i++) {// alert(data[i].name);console.log(str += "<option value=" + data[i].code + ">" + data[i].name + "</option>");$("#city").empty(); $("#city").append("<option value=" + '-1' + ">" + '請選擇' + "</option>");$("#city").append(str);}}});});});$(document).ready(function() {$('#city').bind('change', function() {$("#co").css('display', 'inline-block');$("#to").css('display', 'none');var pid = $(this).val();$.ajax({type: "get",url: "/index.php/site/ajax",data: {pid: pid,},success: function(json) {// alert(json);var data = eval('(' + json + ')');//json轉化為對象var str = "";for (var i = 0; i < data.length; i++) {//alert(data[i].name);str += "<option value=" + data[i].code + ">" + data[i].name + "</option>";$("#county").empty(); $("#county").append("<option value=" + '-1' + ">" + '請選擇' + "</option>");$("#county").append(str);}}});});});$(document).ready(function() {$('#county').bind('change', function() {$("#to").css('display', 'inline-block');var pid = $(this).val();$.ajax({type: "get",url: "/index.php/site/ajax",data: {pid: pid,},success: function(json) {// alert(json);var data = eval('(' + json + ')');var str = "";for (var i = 0; i < data.length; i++) {//alert(data[i].name);str += "<option value=" + data[i].code + ">" + data[i].name + "</option>";$("#town").empty(); $("#town").append("<option value=" + '-1' + ">" + '請選擇' + "</option>");$("#town").append(str);}}});});}); </script>
                            
                        
                        
                        2、html 部分<span><select name="province1" id="province1"><option value="-1">請選擇</option><option value="11">北京市</option><option value="12">天津市</option><option value="13">河北省</option><option value="14">山西省</option><option value="15">內蒙古自治區</option><option value="21">遼寧省</option><option value="22">吉林省</option><option value="23">黑龍江省</option><option value="31">上海市</option><option value="32">江蘇省</option><option value="33">浙江省</option><option value="34">安徽省</option><option value="35">福建省</option><option value="36">江西省</option><option value="37">山東省</option><option value="41">河南省</option><option value="42">湖北省</option><option value="43">湖南省</option><option value="44">廣東省</option><option value="45">廣西壯族自治區</option><option value="46">海南省</option><option value="50">重慶市</option><option value="51">四川省</option><option value="52">貴州省</option><option value="53">云南省</option><option value="54">西藏自治區</option><option value="61">陜西省</option><option value="62">甘肅省</option><option value="63">青海省</option><option value="64">寧夏回族自治區</option><option value="65">新疆維吾爾自治區</option><option value="71">臺灣省</option><option value="81">香港特別行政區</option><option value="82">澳門特別行政區</option></select> </span> <span id="c" style='display: none'><label for="city-proper">市</label><select name="city1" id="city"></select> </span> <span id="co"style='display: none'><label for="city-proper">縣區</label><select name="county1" id="county"></select> </span> <span id="to" style='display: none'><label for="city-proper">鄉鎮(街道)</label><select name="town1" id="town"></select> </span>
1、jq部分 <script>$(document).ready(function() {$('#province1').bind('change', function() {$("#c").css('display', 'inline-block');$("#to").css('display', 'none');$("#co").css('display', 'none');var pid = $(this).val();if (pid == '-1') {$("#c").css('display', 'none');}$.ajax({type: "get",url: "/index.php/site/ajax",data: {pid: pid,},success: function(json) {//alert(json);var data = eval('(' + json + ')');//json轉化為對象var str = "";for (var i = 0; i < data.length; i++) {// alert(data[i].name);console.log(str += "<option value=" + data[i].code + ">" + data[i].name + "</option>");$("#city").empty(); $("#city").append("<option value=" + '-1' + ">" + '請選擇' + "</option>");$("#city").append(str);}}});});});$(document).ready(function() {$('#city').bind('change', function() {$("#co").css('display', 'inline-block');$("#to").css('display', 'none');var pid = $(this).val();$.ajax({type: "get",url: "/index.php/site/ajax",data: {pid: pid,},success: function(json) {// alert(json);var data = eval('(' + json + ')');//json轉化為對象var str = "";for (var i = 0; i < data.length; i++) {//alert(data[i].name);str += "<option value=" + data[i].code + ">" + data[i].name + "</option>";$("#county").empty(); $("#county").append("<option value=" + '-1' + ">" + '請選擇' + "</option>");$("#county").append(str);}}});});});$(document).ready(function() {$('#county').bind('change', function() {$("#to").css('display', 'inline-block');var pid = $(this).val();$.ajax({type: "get",url: "/index.php/site/ajax",data: {pid: pid,},success: function(json) {// alert(json);var data = eval('(' + json + ')');var str = "";for (var i = 0; i < data.length; i++) {//alert(data[i].name);str += "<option value=" + data[i].code + ">" + data[i].name + "</option>";$("#town").empty(); $("#town").append("<option value=" + '-1' + ">" + '請選擇' + "</option>");$("#town").append(str);}}});});}); </script>
總結
以上是生活随笔為你收集整理的jq 地区(省市县区)联动菜单的全部內容,希望文章能夠幫你解決所遇到的問題。
                            
                        - 上一篇: python 调用 C语言函数
 - 下一篇: 性能测试: 编写一个 Locust 文件