用SSM框架 HTML页面 ajax 怎么写一个从数据库获取数据的 二级联动的下拉菜单

用js先写个带参方法，参数就是2级联动的对象obj

写个ajax  data参数就是obj.value， value传给后台获取数据返回给ajax，

然后ajax做你想做的页面处理。。。

<script language="javascript">

function getData(obj) {

var opt = obj.options[obj.selectedIndex]

//alert("The option you select is:"+opt.text+"("+opt.value+")")

$.ajax({

url : "你的url",

type : "Post",

data :  'diqu='+opt.value,

success : function(data1) {

//这里面就可以得到你后台获取过来的数据了，你可以做DOM处理

}

})

}

</script>

<SELECT   onchange="getData(this)">

<OPTION  value ="1">湖北</OPTION>

<OPTION value="2">湖南</OPTION>

<OPTION  value ="3">河北</OPTION>

<OPTION value="4">河南</OPTION>

</SELECT>

呵呵 刚刚做了这个~ 我做的是国家和省份 我就不改代码了哈

给你说的详细一点哈(*^__^*)...

建议你不要直接从方法里写查询数据库的代码！

你一定会获取省和城市的数据吧

比如说 获取到的国家的数据集是cList

获取到省份的是pList

前台：

<asp:DropDownList ID="countryDdl" runat="server" AutoPostBack="True" OnSelectedIndexChanged="countryDdl_SelectedIndexChanged">

</asp:DropDownList>

<asp:DropDownList ID="stateDdl" runat="server">

</asp:DropDownList>

后台：

在页面加载的时候帮他们绑定值

(我看你的代码少绑定了一个哦)

countryDdl.DataSource = cList

countryDdl.DataTextField = "name"// 页面显示的数据--对应你的省份的名

countryDdl.DataValueField = "id"// 值--对应你的省号

countryDdl.DataBind()

一定要页面加载的时候 两个都绑定哦

然后是联动的效果 countryDdl_SelectedIndexChanged

后台代码：

protected void countryDdl_SelectedIndexChanged(object sender, EventArgs e)

{

// 现获取缩选择的国家的值

string countryStr = countryDdl.SelectedValue

// 然后重新绑定一下你城市的值而已...

｝

明白了么

说的够仔细吧

累死了~

这个问题需要联动下拉框（multiSelect）组件

联动下拉框继承select标签，属性基本相同，只是多了一个过滤属性，多个下拉框就是根据这个属性进行联动的。

使用方法：先引入web-html.tld和web-i18n.tld，用web-i18n的js标签引入MultiSelect.js。配置好所需的数据，放到request中。配置好jsp中的multiSelect标签。新建MultiSelect.js的全局js对象，通过这个对象进行多个下拉框联动。

使用标签实例：

<%

Vector options = new Vector()

options.add(new LabelValueBean("Label 0", "Value 0", "Key1"))

options.add(new LabelValueBean("Label 1", "Value 1", "Key1"))

options.add(new LabelValueBean("Label 2", "Value 2", "Key1"))

options.add(new LabelValueBean("Label 3", "Value 3", "Key1"))

options.add(new LabelValueBean("Label 4", "Value 4", "Key1"))

options.add(new LabelValueBean("Label 5", "Value 5", "Key2"))

options.add(new LabelValueBean("Label 6", "Value 6", "Key2"))

options.add(new LabelValueBean("Label 7", "Value 7", "Key2"))

options.add(new LabelValueBean("Label 8", "Value 8", "Key2"))

options.add(new LabelValueBean("Label 9", "Value 9", "Key3"))

request.setAttribute("options", options)

%>

s1变化,s2变化

s1:<html:multiSelect name="s1" onchange="ss.fillData('s1','s2')" value="1">

<html:multiOption value="1">1</html:multiOption>

<html:multiOption value="2">2</html:multiOption>

<html:multiOption value="3">3</html:multiOption>

<html:multiOption value="4">4</html:multiOption>

</html:multiSelect>

s2:<html:multiSelect name="s2" value="11">

<html:multiOption filterKey="1" value="11">tex11</html:multiOption>

<html:multiOption filterKey="1" value="12">tex12</html:multiOption>

<html:multiOption filterKey="1" value="13">tex13</html:multiOption>

<html:multiOption filterKey="2" value="21">tex21</html:multiOption>

<html:multiOption filterKey="2" value="22">tex22</html:multiOption>

<html:multiOption filterKey="2" value="23">tex23</html:multiOption>

<html:multiOption filterKey="3" value="31">tex31</html:multiOption>

<html:multiOption filterKey="3" value="32">tex32</html:multiOption>

<html:multiOption filterKey="3" value="33">tex33</html:multiOption>

<html:multiOption filterKey="4" value="41">tex41</html:multiOption>

<html:multiOption filterKey="4" value="42">tex42</html:multiOption>

<html:multiOption filterKey="4" value="43">tex43</html:multiOption>

</html:multiSelect>

<script language="javascript">

var ss=new MultiSelect("ss")

//触发s1的onchange事件

document.all('s1').onchange()

</script>

multiOption标签属性比option多出的属性：

表2-20

属性 默认值 是否标签属性和必须 描述

filterKey N 用于联动的过滤值

multiOptions和multiOptionsCollection标签属性比options和optionsCollection多出的属性：

表2-21

属性 默认值 是否标签属性和必须 描述

filterKey N 用于联动的过滤值。对应集合中的key值

MultiSelect.js的客户端接口函数：

表2-22

函数 描述

fillData(SelName1,SelName2,url) 通过第一个下拉框，给第二个下拉框赋值。SelName1为第一个下拉框的ID SelName2为第二个下拉框的ID，url为异步取数据的url，可以为一个xml文件

---