JS怎么生成动态关联option

2025-03-25 20:53:52

推荐回答（1个）

回答（1）：

这个用js 的ajax实现，这个是3级的级联菜单。前台用jquery,后台用 php写的，希望对你有帮助。
var category_0= ;
var category_1=;
var select_template=;

//初始值 categorie_id=0;
var parms="categories_id="+0;
$.ajax({
url:"ajax_template.php",
data:parms,
async:false,
type:"get",
datatype:"json",
success:function(msg){
var content_arr=eval(msg);
var categories_arr=eval(content_arr[0]);
var template_arr=eval(content_arr[1]);
var op=""
$.each(categories_arr,function(k,v){
if(k==category_0){
op+="";
}else{
op+="";
}
});
$("#categories_0").append(op);
}
});
//如果categories_1有选择某个值，则刷新后选择上一次的值作为刷新后的初始值。
if(category_1>0){
var parms="categories_id="+category_0;
$.ajax({
url:"ajax_template.php",
data:parms,
async:false,
type:"get",
datatype:"json",
success:function(msg){
var content_arr=eval(msg);
var categories_arr=eval(content_arr[0]);
var template_arr=eval(content_arr[1]);
var op="";
$.each(categories_arr,function(k,v){
if(k==category_1){
op+="";
}else{
op+="";
}
});
$("#categories_1").append(op);
}
});
}
//如果templates有选择某个值，则刷新后选择上一次的值作为刷新后的初始值。
if(select_template>0){
var parms="categories_id="+category_1;
$.ajax({
url:"ajax_template.php",
data:parms,
async:false,
type:"get",
datatype:"json",
success:function(msg){
var content_arr=eval(msg);
var categories_arr=eval(content_arr[0]);
var template_arr=eval(content_arr[1]);
var op="";
$.each(template_arr,function(k,v){
if(k==select_template){
op+="";
}else{
op+="";
}
});
$("#templates").append(op);
}
});
}
//categorie_0值改变，影响后面的两个 categorie_1,template选择框
$("#categories_0").bind("change",function(){
var select_val=$("#categories_0").val()
if(select_val>0){
$("#categories_1").empty();
$("#templates").empty();
var parms="categories_id="+select_val;
$.ajax({
url:"ajax_template.php",
data:parms,
async:false,
type:"get",
datatype:"json",
success:function(msg){
var content_arr=eval(msg);
var categories_arr=eval(content_arr[0]);
var template_arr=eval(content_arr[1]);
var op=""
$.each(categories_arr,function(k,v){
op+="";
});
$("#categories_1").append(op);
}
});
}else{
$("#categories_1").empty();
$("#templates").empty();
}
});

//categorie_0，categorie_1值改变，影响后面的template选择框
$("#categories_0,#categories_1").bind("change",function(){
createTemplate($("#categories_1").val() );
});

function createTemplate(category_id){
$("#templates").empty();
var parms="categories_id="+category_id;
$.ajax({
url:"ajax_template.php",
data:parms,
async:false,
type:"get",
datatype:"json",
success:function(msg){
var content_arr=eval(msg);
var categories_arr=eval(content_arr[0]);
var template_arr=eval(content_arr[1]);
var op="";
$.each(template_arr,function(k,v){
op+="";
});
$("#templates").append(op);
}
});

}