jquery联动菜单,jquery三级联动菜单
求一个简单的jquery二级菜单联动
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实现菜单的联动
很容易,在选择的上面,加个特定的参数,根据参数的变化来改变后面菜单应该显示的内容
一张表 怎么 jquery省市区三级联动
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(查询结果数组);
}
用jquery实现三级下拉菜单联动时,菜单三无法显示。
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个下拉菜单选择'护肤'才会对第二个下拉菜单有联动效果
Jquery实现级联下拉菜单
用combobox的onSelect事件,动态加载
$("#id1").combobox({
onSelect:function(record){
$('#id2').combobox({
url:''
valueField : 'id',
textField : 'text' });
}
});//id1是你省combobox的id,id2是你市combobox的id
求一个在jquery中 同一表中的三级联动下来菜单
有一个是jQuery插件叫mcdropdown4062下拉后可以显示多级菜单2我觉得可以替代多级联动下拉列表
网站标题:jquery联动菜单,jquery三级联动菜单
转载来源:http://myzitong.com/article/phppee.html