首页 新闻 搜索 专区 学院

js下拉列表联动问题。

0
[已解决问题] 解决于 2012-11-01 09:48

要做一个联动的下拉列表,两个SELECT,第二个列表的值通过第一个选择的ID,从数据库查出。

第一:获取第一个下拉列表的值,是用JS写的。然后通过hidden传值。应该在什么事件中通过从hidden中获取的值,获取第二列表的值。

第二:获取第二个列表的值以后,应该如何添加到列表中?

请教大神,给个思路,或者给几段代码。

问题补充: 如果不用ajax,空间使用的是HTML,能否实现?
假扮天使的主页 假扮天使 | 初学一级 | 园豆:30
提问于:2010-11-10 14:39
< >
分享
最佳答案
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
慧☆星 | 大侠五级 |园豆:5555 | 2010-11-11 09:03
还有要引用Jquery
慧☆星 | 园豆:5555 (大侠五级) | 2010-11-11 09:17
其他回答(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);
}
});
});
});

 

写代码的小2B | 园豆:4355 (老鸟四级) | 2010-11-10 15:18
这跟我的需求很不一样啊!
支持(0) 反对(0) 假扮天使 | 园豆:30 (初学一级) | 2010-11-10 15:27
额 好吧 你的第一个问题: 在页面上添加一个Button 服务器端的 隐藏掉(就是display:none) 给这个Button添加上后台事件 内容嘛 就是给第二个select绑定数据 通过JS给隐藏域赋值之后 调用Button的Click事件 document.getElementById('btnID').click();
支持(0) 反对(0) 写代码的小2B | 园豆:4355 (老鸟四级) | 2010-11-10 15:43
0

在第一个下拉列表的selectindex_changed事件中通过从hidden中获取的值,获取第二列表的值。

得到第二个列表的值之后刷新页面给第二个列表赋值。

如果不想刷新页面,用ajax也行。

ajax的过程如下:第一个下拉列表的selectindex_changed --> 从hidden中获取的值,获取第二列表的值 

--> 通过ajax的回调函数给第二个列表赋值。

wang_yb | 园豆:3277 (老鸟四级) | 2010-11-10 15:18
0

第一个select直接在服务器端绑定好数据,然后在客户端给第一个select绑定change事件,发送一个ajax请求到服务器端根据第一个select选中的值来获得第2个select的数据集返回到客户端进行组装,代码一楼已经给出了,可以参考下。

三桂 | 园豆:3565 (老鸟四级) | 2010-11-10 15:29
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册