给你一个JQ的三级联动：<!doctype html><html> <head> <title></title> <meta charset = "utf-8"/></head><style> </style><body><select id="one"> <option value="">请选择省份</option> </select><select id="two"> <option value="">请选择城市</option></select><select id="three"> <option value="">请选择区域</option></select> <script type="text/javascript" src="js/jquery-1.12.0.js"></script><script type="text/javascript"> /* 1.搭建框架 2.给省份和城市绑定change事件 */$(function(){ var province = [ {"name" : "广东省" , "city" : [ { "name" : "广州市" , "area" : ["越秀区","荔湾区","海珠区","天河区,白云区"] }, { "name" : "深圳市" , } ] }, {"name" : "浙江省" , "city" : [ { "name" : "杭州市" , "area" : ["上城区","下城区","江干区","西湖区"] }, { "name" : "丽水" , "area" : ["莲都区","松阳县","遂昌县","云和县"] } ] }, {"name" : "江西省" , "city" : [ { "name" : "南昌市" , "area" : ["东湖区","西湖区","青云谱区","湾里区"] }, { "name" : "九江市" , "area" : ["浔阳区","庐山区","瑞昌市","九江县"] }, { "name" : "赣州市" , "area" : ["章贡区","南康区","上犹县","赣县"] } ] }, ]; // 二级联动 $("#two").change(function(){ var one_index = $("#one option:selected").index(); var two_index = $("#two option:selected").index(); var three = $("#three"); three.empty().append("<option>请选择区域</option>"); if(two_index > 0){ var area = province[one_index-1].city[two_index-1].area; for(var i = 0 ; i < area.length ; i++){ three.append("<option>"+area[i]+"</option>"); } } }); // 一级联动 $("#one").change(function(){ var one_index = $("#one option:selected").index(); var two = $("#two"); console.log(one_index) two.empty().append("<option>请选择城市</option>"); $("#three").empty().append("<option>请选择区域</option>");//清除 if(one_index > 0){ var city = province[one_index-1].city; console.log(province[one_index-1].city) for(var i = 0 ; i < city.length ; i++){ two.append("<option>"+city[i].name+"</option>"); } } }); init(); function init(){ for(var i = 0 ; i < province.length ; i++){ $("#one").append("<option>"+province[i].name+"</option>"); } }});</script></body></html>ajax实现联动
$("#media").change(function(){
var media_id = $("#media").val();
$.ajax({
type:"post",
url:"{:url('Mediarefund/ajax_media_product')}",
data: {media_id: media_id},
dataType:"json",
success:function(data){
var option = "<option value='' disabled selected>请选择</option>";
if(data){
$.each(data,function(i,result){
option += "<option value='"+result["id"]+"'>"+result["product_name"]+"</option>";
})
}
$("#product_name").html(option);
$("#frame_name").val("请选择");
}
});
});
$("#product_name").change(function(){
var product_id = $("#product_name").val();
$.ajax({
type:"post",
url:"{:url('Mediarefund/ajax_frame')}",
data: {product_id: product_id},
dataType:"json",
success:function(data){
var option = "<option value='' disabled selected>请选择</option>";
if(data){
$.each(data,function(i,result){
option += "<option value='"+result["id"]+"'>"+result["frame"]+"</option>";
})
}
$("#frame_name").html(option);
}
});
});
//查询出该框架对应的媒体收款信息
function chage_ajax_bank_info(){
var service_type = $("#service_type").val();
var frame_id = $("#frame_name").val();
var bank = document.getElementById("bank");
var bank_card = document.getElementById("bank_card");
var account = document.getElementById("account");
var bank_type = document.getElementById("bank_type");
var refund_bank_type = document.getElementById("refund_bank_type");
if(service_type ==2){
$.ajax({
type:"post",
url:"{:url('Mediarefund/ajax_bank_info')}",
data: {frame_id: frame_id},
dataType:"json",
success:function(data){
if(data){
bank.style.display="";
bank_card.style.display="";
account.style.display="";
bank_type.style.display="";
document.getElementById("refund_bank").value=data.bank;
document.getElementById("refund_bank_account_opening").value=data.account;
document.getElementById("refund_bank_card_number").value=data.bank_id;
data.account_type = data.account_type+1;
for(var i=0;i<refund_bank_type.options.length;i++){
if(data.account_type==refund_bank_type.options[i].value){
refund_bank_type.options[i].selected = 'selected';
break;
}
}
}
}
});
}else{
bank.style.display="none";
bank_card.style.display="none";
account.style.display="none";
bank_type.style.display="none";
}
};
var media_id = $("#media").val();
$.ajax({
type:"post",
url:"{:url('Mediarefund/ajax_media_product')}",
data: {media_id: media_id},
dataType:"json",
success:function(data){
var option = "<option value='' disabled selected>请选择</option>";
if(data){
$.each(data,function(i,result){
option += "<option value='"+result["id"]+"'>"+result["product_name"]+"</option>";
})
}
$("#product_name").html(option);
$("#frame_name").val("请选择");
}
});
});
$("#product_name").change(function(){
var product_id = $("#product_name").val();
$.ajax({
type:"post",
url:"{:url('Mediarefund/ajax_frame')}",
data: {product_id: product_id},
dataType:"json",
success:function(data){
var option = "<option value='' disabled selected>请选择</option>";
if(data){
$.each(data,function(i,result){
option += "<option value='"+result["id"]+"'>"+result["frame"]+"</option>";
})
}
$("#frame_name").html(option);
}
});
});
//查询出该框架对应的媒体收款信息
function chage_ajax_bank_info(){
var service_type = $("#service_type").val();
var frame_id = $("#frame_name").val();
var bank = document.getElementById("bank");
var bank_card = document.getElementById("bank_card");
var account = document.getElementById("account");
var bank_type = document.getElementById("bank_type");
var refund_bank_type = document.getElementById("refund_bank_type");
if(service_type ==2){
$.ajax({
type:"post",
url:"{:url('Mediarefund/ajax_bank_info')}",
data: {frame_id: frame_id},
dataType:"json",
success:function(data){
if(data){
bank.style.display="";
bank_card.style.display="";
account.style.display="";
bank_type.style.display="";
document.getElementById("refund_bank").value=data.bank;
document.getElementById("refund_bank_account_opening").value=data.account;
document.getElementById("refund_bank_card_number").value=data.bank_id;
data.account_type = data.account_type+1;
for(var i=0;i<refund_bank_type.options.length;i++){
if(data.account_type==refund_bank_type.options[i].value){
refund_bank_type.options[i].selected = 'selected';
break;
}
}
}
}
});
}else{
bank.style.display="none";
bank_card.style.display="none";
account.style.display="none";
bank_type.style.display="none";
}
};
/**
* ajax获取框架信息
*
*/
public function ajax_frame()
{
$service_id = cmf_get_current_admin_id();
$param = $this->request->param();
$product_id = $param['product_id'];
//$media_name = Db::name('media_class')->where('id',$media_id)->find();
if($product_id!=""){
$product_frame = Db::name('media')
->alias('m')
->where('product_line',$product_id)
->where('service_id',$service_id)
->field('m.id,m.frame')
->select();
}
return json($product_frame);
}
* ajax获取框架信息
*
*/
public function ajax_frame()
{
$service_id = cmf_get_current_admin_id();
$param = $this->request->param();
$product_id = $param['product_id'];
//$media_name = Db::name('media_class')->where('id',$media_id)->find();
if($product_id!=""){
$product_frame = Db::name('media')
->alias('m')
->where('product_line',$product_id)
->where('service_id',$service_id)
->field('m.id,m.frame')
->select();
}
return json($product_frame);
}