正文
jquery的二级联动,jq三级联动下拉列表
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
求一个简单的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);
}
相关问答
Q1: 怎么用jquery实现二级联动
你好！
下面是个简单的小例子，仅供参考：
script type="text/javascript"
$(document).ready(function(){
var data={
"liaoning":{
"210100000000":"沈阳市",
"210200000000":"大连市",
"210300000000":"鞍山市"
},
"heilongjiang":{
"230100000000":"哈尔滨市",
"230200000000":"齐齐哈尔市",
"230300000000":"鸡西市"
}
};
$("#aa").change(function(){
if(this.value==0){
$("#bb").empty();
} else {
for(var key in data){
if(key==this.value){
$("#bb").empty();
for(var kkey in data[this.value]){
$("option /").attr("value",kkey).text(data[this.value][kkey]).appendTo($("#bb"));
}
}
}
}
});
});
/script
/head
body
select id="aa"
option value="0"请选择省/option
option value="liaoning"辽宁/option
option value="heilongjiang"黑龙江/option
/select
select id="bb"
/select
/body
希望对你有帮助！
Q2: jq二级联动怎么获取选取值
1.首先将Id为province的添加class=“province”便于针对city隐藏
2.$("#province").on("change", function(){
var index = document.getElementById("province").selectedIndex;
$(".city:not(.city2)").hide();
$(".city2 option").eq(index).attr("selected",true);
});
selectedIndex即可获取选中的行数，根据行数联动city2即可。
