前端框架: Bootstrap JS框架: JQuery nodejs express......
后端框架: ThinkPHP Laravel ci yii zf(zend framework) wordpress..., bootstrap框架: 是html+css的一款前端框架。
簡(jiǎn)潔、直觀、強(qiáng)悍、(移動(dòng)設(shè)備優(yōu)先的前端開發(fā)框架)，讓web開發(fā)更迅速、簡(jiǎn)單，使網(wǎng)頁更加的美觀。快速的適應(yīng)不同的設(shè)備，手機(jī)，平板 電腦 pc 等等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模態(tài)框</title>
<link rel="stylesheet" type="text/css" href="./bs/css/bootstrap.min.css">
<script src="./bs/js/jquery.min.js"></script>
<script src="./bs/js/bootstrap.min.js"></script>
<script src="./bs/js/holder.min.js"></script>
</head>
<body>
<div class="container">
<button class="btn btn-success" data-toggle="modal" data-target="#md">添加地址</button>
<div id="md" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<!-- modal 頭部-->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title text-center" id="myModalLabel">添加收貨地址</h4>
</div>
<!-- modal body -->
<div class="modal-body">
<form action="" method="">
<div class="form-group has-success">
<label>會(huì)員姓名</label>
<!-- form-control 使表單寬度變?yōu)?00%-->
<input type="text" name="name" class="form-control" placeholder="請(qǐng)輸入收貨人姓名">
</div>
<div class="form-group has-error">
<label>聯(lián)系方式</label>
<!-- form-control 使表單寬度變?yōu)?00%-->
<input type="text" name="phone" class="form-control" placeholder="請(qǐng)輸入電話">
</div>
<div class="form-group has-warning">
<label>收貨地址</label>
<!-- form-control 使表單寬度變?yōu)?00%-->
<select id="cid">
<option value="">--請(qǐng)選擇--</option>
</select>
</div>
<input type="submit" class="btn btn-success" value="提交">
</form>
</div>
<!-- modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">關(guān)閉</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
</div>
</body>
<script type="text/javascript">
// alert(o);
//第一級(jí)別數(shù)據(jù)獲取
//Ajax請(qǐng)求
$.ajax({
'type':'get',//請(qǐng)求的方式
'data':{upid:0},//附加參數(shù)
'async':true,//異步操作
'url':"01.php",//服務(wù)器端頁面
'dataType':"json",//響應(yīng)數(shù)據(jù)類型
//接受響應(yīng)數(shù)據(jù)的匿名函數(shù)
success:
function(data){
// alert(data);
//遍歷
for(var i=0;i<data.length;i++){
// alert(data[i].upid);
//把遍歷的數(shù)據(jù) 添加到option
var info='<option value="'+data[i].id+'">'+data[i].name+'</option>';
// alert(info);
//把帶有數(shù)據(jù)的option 內(nèi)部添加到第一個(gè)select
$("#cid").append(info);
}
},
//Ajax 發(fā)送失敗
error:
function(){
alert("Ajax 響應(yīng)失敗");
}
});
// change 文本區(qū)發(fā)生改變的時(shí)候 觸發(fā)當(dāng)前事件
$("select").live('change',function(){
// alert('ssss');
//獲取父級(jí)id
o=$(this);
//清除 下一個(gè)所有的select
//nextAll 清除當(dāng)前元素之后所有同輩元素
o.nextAll("select").remove();
s=o.val();
// alert(s);
$.ajax({
'type':'get',//請(qǐng)求的方式
'data':{upid:s},//附加參數(shù)
'async':true,//異步操作
'url':"01.php",//服務(wù)器端頁面
'dataType':"json",//響應(yīng)數(shù)據(jù)類型
//接受響應(yīng)數(shù)據(jù)的匿名函數(shù)
success:
function(data){
// alert(data);
//創(chuàng)建select
select=$("<select></select>");//= JS document.createElement
//內(nèi)部插入option
select.append($("<option value=''>--請(qǐng)選擇--</option>"));
//判斷
if(data.length>0){
//遍歷
for(var i=0;i<data.length;i++){
// alert(data[i].upid);
//把遍歷的數(shù)據(jù) 添加到option
var info='<option value="'+data[i].id+'">'+data[i].name+'</option>';
// alert(info);
//把帶有數(shù)據(jù)的option 內(nèi)部添加到創(chuàng)建select
select.append(info);
}
//把創(chuàng)建好的select 外部插入到上一個(gè)select 后面
o.after(select);
}
},
//Ajax 發(fā)送失敗
error:
function(){
alert("Ajax 響應(yīng)失敗");
}
});
});
//給button 綁定單擊事件
$("button").click(function(){
//存儲(chǔ)當(dāng)前選中的數(shù)據(jù)
arr=[];
//遍歷所有的select
$("select").each(function(){
//獲取選中的數(shù)據(jù)
m=$(this).find("option:selected").html();
// alert(m);
arr.push(m);
});
// alert(arr);
//把選中的數(shù)據(jù) arr 賦值給當(dāng)前隱藏域
$("input[name='address']").val(arr);
});
</script>
</html>
