var data = [{
成都创新互联公司坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都网站建设、成都做网站、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的介休网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！
id: 1,
pid: 0,
name: '水果'
},
{
id: 2,
pid: 0,
name: '蔬菜'
},
{
id: 3,
pid: 1,
name: '苹果'
},
{
id: 4,
pid: 1,
name: '香蕉'
},
{
id: 5,
pid: 2,
name: '萝卜'
},
{
id: 6,
pid: 2,
name: '茄子'
},
{
id: 7,
pid: 1,
name: '芒果'
},
{
id: 8,
pid: 1,
name: '桔子'
},
{
id: 9,
pid: 2,
name: '青瓜'
},
{
id: 10,
pid: 2,
name: '苦瓜'
}];
window.onload = function() {
var type_sel = document.createElement('select');
if (document.attachEvent) type_sel.attachEvent('onchange', change);
else type_sel.addEventListener('change', change, true);
createOptions(type_sel, 0);
}
function change(e) {
var o = e.srcElement || e.target,
child_sel = document.createElement('select'),
pid = o.value,
obj = document.getElementsByTagName('select')[1];
obj obj.parentNode.removeChild(obj);
createOptions(child_sel, pid);
}
function createOptions(sel, pid) {
var option = document.createElement('option');
option.value = '';
option.innerHTML = '请选择';
sel.appendChild(option);
for (var i in data) {
var d = data[i];
if (d.pid == pid) {
var option = document.createElement('option');
option.value = d.id;
option.innerHTML = d.name;
sel.appendChild(option);
}
}
document.body.appendChild(sel);
}
很容易，在选择的上面，加个特定的参数，根据参数的变化来改变后面菜单应该显示的内容
jquery+ajax就可以搞定的
id，菜单名称，parentid(父级id)，排序，描述
1 河北省 0
2 石家庄 1
3 东城区 2
4 西城区 2
5 廊坊 1
6 河南省 0
接下来使用 jquery + ajax来实现联动
第一级：parentid = 0 的所有菜单
第二级： 一级菜单的onchange()事件根据选中的value 比如：value=1 使用ajax获取 parentid=1的菜单，
前台代码：
select onchange="change_1()" name="sele_1" id="sele_1"
option value="1" 河北省/option
option value="2" 河南省/option
/select
select onchange="change_2()" name="sele_2" id="sele_2"
option value="2" 石家庄/option
option value="5" 廊坊/option
/select
script
function change_1(){
var strvalue=$("#sele_1").val();
$.ajax({
type:'post',
url: "PHP函数 select_ajax_1()",
data:{"specialty_1":strvalue},
dataType: "json",
success: function (data) {
console.log(data); //控制台输出
$('#sele_2').html(""); //清空
//读取json数据
for (var i=0;idata.length;i++){
// 数据库的联动菜单ID 菜单名
$('#sele_2').append("option value='"+data[i].linkageid+"' "+data[i].name+"/option");
}
},
error:function(data){
alert("异常！");
}
})
}
/script
后台php代码：
function select_ajax_1() {
//获取ajax传来的 specialty_1
$valueid = intval($_POST['specialty_1']);
/*
查询 parentid=$valueid的菜单
*/
//返回json数据
echo json_encode(查询结果数组);
}
class_array是一个二维数组，看你代码的意思。。当第1个下拉菜单
触发change事件时，即
if(v[2]==$("#pard1").val())
$("option
value='"+v[0]+"'"+v[1]+"/option").appendTo($("#pard2"));
这是表示传入的数组v的第三个元素等于第1个下拉菜单的值时，才会将第2个下拉菜单填充。
我看v数组的第三个元素的值有0,1,14，但是又要与第1个下拉菜单的值相等的唯有class_array[0]=new
Array('1','护肤','0');所以，在第1个下拉菜单选择'护肤'才会对第二个下拉菜单有联动效果
用combobox的onSelect事件，动态加载
$("#id1").combobox({
onSelect:function(record){
$('#id2').combobox({
url:''
valueField : 'id',
textField : 'text' });
}
});//id1是你省combobox的id，id2是你市combobox的id
有一个是jQuery插件叫mcdropdown4062下拉后可以显示多级菜单2我觉得可以替代多级联动下拉列表
