Question

JS怎么生成动态关联option

是两个下拉列表 第一个选择不同数据的时候 第二个数据会变 数据由后台传输 数据也是可变的 请问这个JS要怎么写！！！急！！！
前台和JS代码都要！谢谢！

Answer 1

这个用js 的ajax实现，这个是3级的 级联菜单。前台用jquery,后台用 php写的，希望对你有帮助。
var category_0= <?php echo isset($_POST['categories_0'])?$_POST['categories_0']:"0";?>;
var category_1=<?php echo isset($_POST['categories_1'])?$_POST['categories_1']:"0";?>;
var select_template=<?php echo isset($_POST['templates'])?$_POST['templates']:"0";?>;

//初始值 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="<option value='0'>SELECT shops..</option>"
$.each(categories_arr,function(k,v){
if(k==category_0){
op+="<option value='"+k+"' selected>"+v+"</option>";
}else{
op+="<option value='"+k+"' >"+v+"</option>";
}
});
$("#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+="<option value='"+k+"' selected>"+v+"</option>";
}else{
op+="<option value='"+k+"' >"+v+"</option>";
}
});
$("#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+="<option value='"+k+"' selected>"+v+"</option>";
}else{
op+="<option value='"+k+"' >"+v+"</option>";
}
});
$("#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+="<option value='"+k+"' >"+v+"</option>";
});
$("#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+="<option value='"+k+"' >"+v+"</option>";
});
$("#templates").append(op);
}
});

}