首頁 > 開發者 > 網站開發

三級聯動使用Jquery和bootstrap進行布局

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：div   jquer   value   select   red   http   width   change   ctf   

網頁的html代碼

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/20170720.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/from3.js"></script>

</head>

<body>
<div class="container">
<div class="container-fluid">
<div class="row">
<div class="col-lg-7 colRowForm">
<div class="colRowFormBlue">
<label >省份：</label>
<select id="province">
<option>請選擇</option>
<!--<option>河南</option>
<option>山東</option>-->
</select>
<label>城市：</label>
<select id="provinceCity" class="slectFrom">
<!--<option>請選擇</option>-->
</select>
<label>街道：</label>
<select id="Citystreet" class="slectFrom">

</select>
</div>
</div>
<div class="col-lg-5 colRowForm">
<div class="colRowFormBlue">

</div>
</div>
</div>

</div>
</div>

</body>

</html>

20170720.css對應的樣式

.colRowForm{
border: 1px solid red;
height: 500px;
}
.colRowFormBlue{
border: 2px solid blue;
height: 200px;
max-width:100% ;
}
.slectFrom{
width: 60px;
}

from3.js對應的js檔案內容

$(function() {
json = [{
"code": "01",
"name": "河南",
"city": [{
"codec": "0101",
"namec": "鄭州",
"streetc": [{
"codeCc": "010101",
"nameCc": "金水區"
}, {
"codeCc": "010102",
"nameCc": "惠濟區"
}, {
"codeCc": "010103",
"nameCc": "二七區"
}]
}, {
"codec": "0102",
"namec": "商丘",
"streetc": [{
"codeCc": "010201",
"nameCc": "商丘街區1"
}, {
"codeCc": "010202",
"nameCc": "商丘街區2"
}, {
"codeCc": "010203",
"nameCc": "商丘街區3"
}]
}, {
"codec": "0103",
"namec": "信陽",
"streetc": [{
"codeCc": "010201",
"nameCc": "信陽街區1"
}, {
"codeCc": "010201",
"nameCc": "信陽街區2"
}, {
"codeCc": "010201",
"nameCc": "信陽街區3"
}]
}]
},
{
"code": "02",
"name": "山東",
"city": [{
"codec": "0201",
"namec": "淄博",
"streetc": [{
"codeCc": "010201",
"nameCc": "淄博街區1"
}, {
"codeCc": "010201",
"nameCc": "淄博街區2"
}, {
"codeCc": "010201",
"nameCc": "淄博街區3"
}]
}, {
"codec": "0202",
"namec": "青島",
"streetc": [{
"codeCc": "010201",
"nameCc": "青島街區1"
}, {
"codeCc": "010201",
"nameCc": "青島街區2"
}, {
"codeCc": "010201",
"nameCc": "青島街區3"
}]
}, {
"codec": "0203",
"namec": "濰坊",
"streetc": [{
"codeCc": "010201",
"nameCc": "濰坊街區1"
}, {
"codeCc": "010201",
"nameCc": "濰坊街區2"
}, {
"codeCc": "010201",
"nameCc": "濰坊街區3"
}]
}]
},
{
"code": "03",
"name": "江蘇",
"city": [{
"codec": "0301",
"namec": "蘇州",
"streetc": [{
"codeCc": "010201",
"nameCc": "蘇州街區1"
}, {
"codeCc": "010201",
"nameCc": "蘇州街區2"
}, {
"codeCc": "010201",
"nameCc": "蘇州街區3"
}]
}, {
"codec": "0302",
"namec": "南京",
"streetc": [{
"codeCc": "010201",
"nameCc": "南京街區1"
}, {
"codeCc": "010201",
"nameCc": "南京街區2"
}, {
"codeCc": "010201",
"nameCc": "南京街區3"
}]
}, {
"codec": "0303",
"namec": "無錫",
"streetc": [{
"codeCc": "010201",
"nameCc": "無錫街區1"
}, {
"codeCc": "010201",
"nameCc": "無錫街區2"
}, {
"codeCc": "010201",
"nameCc": "無錫街區3"
}]
}]
}

];
$.each(json, function(index, row) {
$("#province").append("<option value=" + row.code + ">" + row.name + "</option>");

});
$("#province").change(function() {
var province = $(this).val();
if(province == "請選擇") {
return;
} else {
provinceCity(province);
}
});
$("#provinceCity").change(function(){
var cityName=$(this).val();
cityStreet(cityName);
});

});

function provinceCity(nameProvince) {
$("#provinceCity").empty();
$("#Citystreet").empty();
$.each(json, function(index, row) {
if(row.code == nameProvince) {
$.each(row.city, function(indec, rowc) {
$("#provinceCity").append("<option value=" + rowc.codec + ">" + rowc.namec + "</option>");
if(indec == 0) {
$.each(rowc.streetc, function(indeCc, rowCc) {
$("#Citystreet").append("<option value=" + rowCc.codeCc + ">" + rowCc.nameCc + "</option>");
});
}
});
}
});
};

function cityStreet(nameCity) {
$("#Citystreet").empty();
$.each(json,function(index,row){
$.each(row.city,function(indec,rowc){
if(rowc.codec == nameCity)
{
$.each(rowc.streetc,function(indeCc,rowCc) {
$("#Citystreet").append("<option value=" + rowCc.codeCc + ">" + rowCc.nameCc + "</option>");
});
}
});
});

};

相關檔案的

http://pan.baidu.com/s/1geLTzSR

 

三級聯動使用Jquery和bootstrap進行布局

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
bootstrap jquery cdn jquery datatables bootstrap best bootstrap codecademy bootstrap stackpath bootstrap angular2 bootstrap bootstrap ini
相關文章
自學成才的秘密：115個 web Develop 資源_經典網摘
H5 中html 頁面存為圖片並長按 儲存
__x__(20)0907第四天__ css 框模型
SVN提示https認證驗證失敗問題svn: E230001: Server SSL certificate verifi...
JS如何判斷文字是全形還是半形（轉載）
Citrix NetScaler產品學習筆記之一：Citrix NetScaler概述

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More