我的需求是这样的,在新闻发布系统中需要给要发布的新闻设置新闻类别,类别有两层,所以我想到了用Dropdownlist级联操作来实现。
在页面添加隐藏域<input type="hidden" id="inputCity" runat="server" />
然后在网页中添加javascript代码,实时把二级dropdownlist的值放到input中去,然后在后台读取input中的值。 代码如下
<asp:DropDownList ID="parentDropDownList" runat="server" Width="100">
<asp:ListItem Value="1">第一大类</asp:ListItem>
<asp:ListItem Value="2">第二大类</asp:ListItem>
<asp:ListItem Value="3">第三大类</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="childDropDownList" runat="server" Width="100">
<asp:ListItem Value="1">第一大类,第一小类</asp:ListItem>
<asp:ListItem Value="2">第一大类,第二小类</asp:ListItem>
<asp:ListItem Value="3">第二大类,第一小类</asp:ListItem>
...
<asp:ListItem Value="x">第N大类类,第M小类</asp:ListItem>
</asp:DropDownList>
实现过程:
使用ajax实现Dropdownlist的无刷新级联效果网上有很多资料我参考的是shawn的《DropDownList用JQuery实现Ajax三级联动》成功的实现了级联效果。这里要指出作者的一个错误:作者的一个错误,他的Jquery调用函数前面少了一个(document).ready,本来JQuery就不熟悉,搞得我调了很久,
改完这个错误基本可以实现无刷新的级联,不过后面的使用中发现有两个地方的错误。
问题一:在网页提交后读不到Dropdownlist的值
解决方案:使用了ヤ第②⑨號座位ヾ 的《 用DropDownList实现Ajax无刷新省市三级联动中出现的错误 》中的解决方案。在页面添加隐藏域<input type="hidden" id="inputCity" runat="server" />
然后在网页中添加javascript代码,实时把二级dropdownlist的值放到input中去,然后在后台读取input中的值。 代码如下
<script type="text/javascript">
...
$(document).ready(function() {
...
$("#childDropDownList").click(function() {
document.getElementById("inputlv2id").value = $(this).val();
));
});
...
</script>
后台读取input中的值
...
$(document).ready(function() {
...
$("#childDropDownList").click(function() {
document.getElementById("inputlv2id").value = $(this).val();
));
});
...
</script>
_atitle.Lv2id = Convert.ToInt32(inputlv2id.Value);
问题二:在选择级联的新闻类别后不响应页面上的“发布”Button的函数
解决方案:这里有一个我在二级Dropdownlist中初始化绑定了一级新闻下第一类下的二级新闻,结果在选择一级新闻的时候只有选择的是第一个类别“发布”按钮才有响应。
感慨是我以为是Javascript代码哪里数组越界了,找了好久,最后发现是只要初始化绑定的时候没有的就不响应页面上的按钮操作,于是我的做法是初始化把二级新闻的所有类别全部绑定了,然后在页面加载的时候再用javascript代码吧全部remove掉,只留下第一大类的新闻的二级新闻类别。
把级联的第二小类的所有项都绑定
<asp:DropDownList ID="parentDropDownList" runat="server" Width="100">
<asp:ListItem Value="1">第一大类</asp:ListItem>
<asp:ListItem Value="2">第二大类</asp:ListItem>
<asp:ListItem Value="3">第三大类</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="childDropDownList" runat="server" Width="100">
<asp:ListItem Value="1">第一大类,第一小类</asp:ListItem>
<asp:ListItem Value="2">第一大类,第二小类</asp:ListItem>
<asp:ListItem Value="3">第二大类,第一小类</asp:ListItem>
...
<asp:ListItem Value="x">第N大类类,第M小类</asp:ListItem>
</asp:DropDownList>
使用javascript把二级类别上的先remove掉,然后添加上第一大类下的所有小类:
<script type="text/javascript">
...
$(document).ready(function() {
$("#childDropDownList option").remove();
var temp = "第一大类第一小类$1$第一大类第二小类$2$";
var child = temp.split("$");
for (var i = 0; i < child.length - 1; ) {
var newOption = $("<option >" + child[i] + "</option>");
$(newOption).val(child[i + 1]);
$("#childDropDownList").append(newOption);
i = i + 2;
}
});
...
</script>
...
$(document).ready(function() {
$("#childDropDownList option").remove();
var temp = "第一大类第一小类$1$第一大类第二小类$2$";
var child = temp.split("$");
for (var i = 0; i < child.length - 1; ) {
var newOption = $("<option >" + child[i] + "</option>");
$(newOption).val(child[i + 1]);
$("#childDropDownList").append(newOption);
i = i + 2;
}
});
...
</script>