js下拉列表联动问题。
0
最佳答案
2
无限级分类
数据库设计
ClassID ClassName ParentID
var BindSelectClass = function(loadingID,containerID,ajaxJsonUrl,ClassNameID,HideTypeId,curPid){
this.loadingCtl = document.getElementById(loadingID);
this.container = document.getElementById(containerID);
this.ajaxJsonUrl=ajaxJsonUrl;
this.ClassNameID=ClassNameID;
this.HideTypeCtl=document.getElementById(HideTypeId);
this.curPid=curPid;
};
BindSelectClass.prototype={
Bind:function(level,parentID,className,o){
if(parentID==-1)
{if($(o).prev().html()){this.HideTypeCtl.value=$(o).prev().val();}else{this.HideTypeCtl.value=this.curPid;}$(o).nextAll().remove();return;}
if(this.loadingCtl){this.loadingCtl.style.display="inline";}
this.HideTypeCtl.value=parentID;
if(this.ClassNameID){$("#"+this.ClassNameID).val(className);}
var self = this;
$.ajax({url:self.ajaxJsonUrl+parentID,type:'get',dataType:'json',success: function(json){
if(self.loadingCtl){self.loadingCtl.style.display="none";}
var ctl=document.getElementById("class_s_"+level);
if(json.items.length>0)
{
if(ctl==null){
ctl=document.createElement("select");
ctl.id="class_s_"+level;
$(ctl).change(function(){self.Bind(json.level,$(this).val(),$(this).children('option:selected').text(),this);});
self.container.appendChild(ctl);
}
$(ctl).nextAll().remove();
ctl.length=1;
ctl.options[0]=new Option('请选择', '-1');
for (i=0;i<json.items.length;i++){
ctl.options[ctl.length]=new Option(json.items[i].ClassName, json.items[i].ClassID);
}
ctl.focus();
}else{$(o).nextAll().remove();}
}});
}
};
<input type="text" id="txtClassName" readonly="readonly" />
<span id="selectlist"></span><span id="loading" style="display:none">加载中……</span><input type="button" value="重新选择" onclick="BindClass('type0',0,'');" /><input type="hidden" id="hide_typeid" />
var BindSelectClass=new BindSelectClass('loading','selectlist','HandBookClassHandler.ashx?h=json&PID=','txtClassName','hide_typeid');BindSelectClass.Bind(newCtlID,parentID,className);
奖励园豆：5
还有要引用Jquery
其他回答(3)
0
<select id='select1' >
<option value='0'>0</option>
<option value='1'>1</option>
<option value='2'>2</option>
</select>
<select id='select2' >
</select>
$(function(){
$('#select1').change(function(){
$.ajax({
url:'yourUrl',
date:'id='+$('#select1').val(),
type:'get',
success:funciton(msg)
{
//msg可以是json格式，也是可以是<option></option>
//如果是前者
$.each(msg,function(){
$('#select2').append("<option value='"+this.id+"'>"+this.value+"</option>");
});
//如果是后者直接
$('#select2').append(msg);
}
});
});
});
这跟我的需求很不一样啊！
额 好吧
你的第一个问题：
在页面上添加一个Button 服务器端的 隐藏掉（就是display:none）
给这个Button添加上后台事件
内容嘛 就是给第二个select绑定数据
通过JS给隐藏域赋值之后
调用Button的Click事件
document.getElementById('btnID').click();
0
在第一个下拉列表的selectindex_changed事件中通过从hidden中获取的值，获取第二列表的值。
得到第二个列表的值之后刷新页面给第二个列表赋值。
如果不想刷新页面，用ajax也行。
ajax的过程如下：第一个下拉列表的selectindex_changed --> 从hidden中获取的值，获取第二列表的值
--> 通过ajax的回调函数给第二个列表赋值。
0
第一个select直接在服务器端绑定好数据,然后在客户端给第一个select绑定change事件，发送一个ajax请求到服务器端根据第一个select选中的值来获得第2个select的数据集返回到客户端进行组装，代码一楼已经给出了，可以参考下。
