jquery二级联动,jquery二级联动菜单
jquery如何动态产生二级联动,就是点击添加按钮后产生一个二级联动
二级联动:
script
//点击按钮生成一级联动
$("button").on("click",function(){
var oneSelect = "select name='oneSelect'/select";
$("body").append(oneSelect);
});
//这里说明下,英文二级联动是根据一级联动来的,逻辑代码看你自己了,因为
//一级联动是js动态生成的,再绑定事件涉及特殊方法live,而live这个方法1.8.3
//jquery版本以后是废弃的,所以要使用
//$("select[name=oneSelect]").on("change","父级节点",fucntion(){});
//根据你的一级联动以及需求选择触发二级联动
$("select[name=oneSelect]").live("change",function(){
var twoSelect = "select name='twoSelect'/select";
$("body").append(twoSelect);
});
/script
怎么用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
希望对你有帮助!
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即可。
jQuery如何实现下拉框的二级联动?
给你一个三级联动的,你你参考一下
script language="JavaScript" type="text/javascript"
function createCode()
{
//数组赋值
var varname = new Array(4);
varname[0] = "请选择";
varname[1] = "红色";
varname[2] = "黄色";
varname[3] = "蓝色";
//下拉框赋值
for(var i=0;i4;i++)
{
document.getElementById('xlk1').options[i] = new Option(varname[i],i);
}
copy();
}
//复制下拉框一给下拉框二
function copy()
{
for(i=0;idocument.getElementById("xlk1").options.length;i++)
{
document.getElementById('xlk2').options[i] = new Option(document.getElementById("xlk1").options[i].text,i)
}
copytwo();
}
//复制下拉框一给下拉框二
function copytwo()
{
for(i=0;idocument.getElementById("xlk2").options.length;i++)
{
document.getElementById('xlk3').options[i] = new Option(document.getElementById("xlk2").options[i].text,i)
}
}
function onChange1()
{
//获取下拉框1的选中项
var strid=document.getElementById("xlk1").value;
//获取选中项的内容
//var strtxt=document.getElementById("xlk1").options[window.document.getElementById("xlk1").selectedIndex].text;
//获取指定ID下拉框的项总数
//var strnub=document.getElementById("xlk1").options.length;
copy();
if(strid != 0)
{
document.getElementById("xlk2").options.remove(strid);
document.getElementById("xlk3").options.remove(strid);
}
document.getElementById("textfield").value=strid+strtxt+strnub;
}
function onChange2()
{
//获取下拉框1的选中项
var strid2=document.getElementById("xlk2").selectedIndex;
//获取选中项的内容
var strtxt2=document.getElementById("xlk2").options[window.document.getElementById("xlk2").selectedIndex].text;
//获取指定ID下拉框的项总数
var strnub2=document.getElementById("xlk2").options.length;
copytwo();
if(strid2 != 0)
{
document.getElementById("xlk3").options.remove(strid2);
}
}
/script
body onLoad="createCode()"
form id="form1" name="form1" method="post" action=""
select name="xlk1" id="xlk1" onChange="onChange1()"/select
select name="xlk2" id="xlk2" onChange="onChange2()"/select
select name="xlk3" id="xlk3"/select
/form
jquery 二级联动 select 无法选中 option
乍一看你代码有很多小细节上的不规范,也不知道是粘贴上来少了,我改下你php页
select只能有1个option有selected属性,如果多个都有,只会落在最后1个上
?php
//这是jQuery里load的这个页面
include('loginis.php');
include('../include/db_class.php');
//数据库操作,根据情况换成自己的数据操作
$fid=intval($fid);
$resultclass=$db-query("select * from ${dbpre}productclass where id='$fid' and sid0 order by position asc");
echo "select id='sid' name='sid'";
echo"option value=''请选择/option";
while($type=$db-getarray($resultclass)){
echo "option value='$type[sid]' ".( $type['sid'] == 3?"selected":"" )."$type[name]/option";
}
echo "/select";
?
栏 目:其它综合
本文地址:https://www.xiuzhanwang.com/a1/qitazonghe/17138.html
您可能感兴趣的文章
- 04-02jquery数组创建,jquery 数组
- 04-02jquery点击,jquery点击隐藏显示事件
- 04-02jquery的hover,jquery概述
- 04-02jquery$不起作用,为什么jquery不执行
- 04-02jquery与jsp,用jquery
- 04-02jquery点击展开,js点击展开
- 04-02jquery步骤,jquery方法
- 04-02小程序jquery,小程序开发公司
- 04-02图片jquery,图片头像
阅读排行
本栏相关
- 04-02android传智播客,传智播客官网
- 04-02android发展前景,android前景分析
- 04-02android屏幕适配,android屏幕适配 大厂
- 04-02android说明,android csdn
- 04-02android连接网络,安卓网络连接
- 04-02android素材,手机 素材
- 04-02线程池android,线程池拒绝策略有哪些
- 04-02android环境,android环境变量配置SDK
- 04-02android短信验证码,android免费的短信验
- 04-02腾讯手机管家forandroid,腾讯手机管家新
随机阅读
- 08-05DEDE织梦data目录下的sessions文件夹有什
- 01-10C#中split用法实例总结
- 08-05dedecms(织梦)副栏目数量限制代码修改
- 01-10SublimeText编译C开发环境设置
- 01-11ajax实现页面的局部加载
- 01-10delphi制作wav文件的方法
- 04-02jquery与jsp,用jquery
- 08-05织梦dedecms什么时候用栏目交叉功能?
- 01-11Mac OSX 打开原生自带读写NTFS功能(图文
- 01-10使用C语言求解扑克牌的顺子及n个骰子