jsp
productLine:<html:select property="productLine" styleClass="productNode" styleId="productLine">
<html:option value=""></html:option>
<html:options collection="class3List" property="item_id" labelProperty="item_name" />
</html:select>
productFamily:
product:
<html:select property="productFamily" styleClass="productNode" styleId="productFamily">
<html:option value=""></html:option>
<html:options collection="class1List" property="item_id" labelProperty="item_name" />
</html:select>
product:<html:select property="product" styleClass="productNode" styleId="product">
<html:option value=""></html:option>
<html:options collection="class2List" property="item_id" labelProperty="item_name" />
</html:select>
JS
/**
* 初始化绑定事件
*/
$(document).ready(function(){
$('.productNode').each(function(){
var $this = $(this);
$this.change(function(){
//产品线select onchange
if ($this.attr('id') == "productLine")
{
var $proFamilyEL = $('#productFamily');
var $proEL = $('#product');
//如果是请选择,产品族,客户产品清空,否则Ajax请求
clearOptions($proEL);
clearOptions($proFamilyEL);
//如果是请选择,不请求
var productLine = $.trim($this.val());
if (productLine != "")
{
ajaxSearchChildNode($proFamilyEL, productLine, "");
}
}
//产品族select onchange
if ($this.attr('id') == "productFamily")
{
var $proEL = $('#product');
//如果是请选择,客户产品清空,否则Ajax请求
clearOptions($proEL);
//如果是请选择,不请求
var productFamily = $.trim($this.val());
if (productFamily != "")
{
ajaxSearchChildNode($proEL, $.trim($('#productLine').val()), productFamily);
}
}
});
});
});
function ajaxSearchChildNode($element, productLine, productFamily) {
$.ajax({
url : '/supportmng/pages/usermanage/user/listUserInfo.do?actionFlag=getProductNodeByAjax',
data : {
'productLine' : productLine,
'productFamily' : productFamily
},
type : 'get',
dataType : 'json',
async : false,
success : function(json){
clearOptions($element);
$.each(json,function(i){
var optionVal = json[i].item_id;
var optionTxt = json[i].item_name;
if (optionVal != "" && optionVal != "undefined")
{
if (i == 0)
{
$element.append('<option value=""></option>');
}
$element.append('<option value="' + optionVal + '">' + optionTxt + '</option>');
}
});
}
});
}
//清空下拉列表的内容
function clearOptions($element) {
$element.empty();
}
分享到:
相关推荐
3级级联 jquery3
JavaScript 开发的3级级联菜单,简单易懂
//绑定部门,员工级联效果 $("select[name='department.id']").each(function(){ $(this).bind("change",function(){ var did = $(this).val(); $.ajax({ url:basePath + '/admin/organization/...
jsp+js的3级级联菜单制作,可以提交到数据库保存 可以讲选定的值存入数据库
3级CIC滤波器级联的verilog代码,CIC滤波器主要用于抽取结构,本代码给出了器verilog的源代码,可综合。
该实例为本人项目中使用的模块代码,经过专业测试人员测试,兼容所有主流浏览器,如有不解之处请联系本人
$(document).ready(function(){ ... 厂商3:{品牌3_1:"型号3_1_1,型号3_1_2",品牌3_2:"型号3_2_1,型号3_2_2"} }; $.each(arrData,function(pF){ $("#selF").append("<option>"+pF+"</option>"); });
刚学AJAX 做了个例子 核心代码 供初学者参考
3级级联操作,C#语言,此类用hashtable完成,自己在某个项目中用到,效果还行。
这是一个完整的城市三级级联,到县级单位。
3级级联菜单 利用JS实现 虽然很简单 但是对于初学者还是很实用的
运用Ajax实现3级的级联菜单。ajax是浏览器中的js程序向服务器端发送异步请求,返回的数据为json类型。
用js实现三级级联,('s1','s2')"> 请选择</option> <option value="A" >A</option> <option value="B">B</option> <select id="s2" onChange="changeSelect3('s2','s3')"> 请选择</option> <select id="s3">...
ASP+JavaScript+SQL四级级联,及无限级级联,超级简单和空间我!我自己写的,有注释并且测试完整!有问题QQ:4321847. 1.class.sql创建分类数据库。 2.select4ji.asp是ASP实现的4级select联菜单。 3.classlist是分类...
vue+高德地图原生制作五级城市级联框(并加入高德地图区域渲染)。 想要实现一个上图的效果,实际上我们可以拆分成左边的级联搜索框和右边的高德地图渲染。级联框的数据来源来自高德地图的API,后面我会提到地图数据...
使用XML文件实现3级下拉框级联 通常情况下只适用于XML文件相对较小
数据比较老,实现了省市区三级级联demo,大家打开直接用即可,点击市出不来区县,请放到apache或者NGINX 下面用浏览器访问,因为用了jquery ajax,硬盘直接打开ajax会报跨域
此为完整的省市区三级级联 完全用js编写
JS+XML省市区三级级联控件,可任意选中,调用简单,调用如下: 选中区级 前面默认选中 initCity('province','city','district','dist: '+487); 选中市级 initCity('province2','city2','district2','city: '+295); ...
最全的省市县(区)三级级联,同时有json数据和mysql数据库文件,可以相互参照,文件内是html+jquery+json数据的例子,数据库可自己参照修改