jQuery Ajax实现Select多级关联动态绑定数据的示例代码

JQuery选择插件分为基础版和美化版，重点是美化版，如下图所示：

美化后的插件和原版本相比，可以说非常漂亮，功能也更强大(这里不谈，自己去发现)。这里主要是添加它的唯一属性，并调用class="chzn-select ":

Jsp页面：

select class=" chzn-select " id=' code ' name=' code './select js页面：

$('.chzn-select’)。choose()；注意jQuery引用的js版本很多，建议使用更高的版本，比如jquery-1.9.1.min.js

现在进入主题，选择绑定数据很常见，但大多数是静态的或数据确定的，这很容易处理。我们需要的是动态绑定和多级关联。

通过以下示例，了解如何逐步处理它：

这里我只选择二级联想，比较复杂的你完全掌握后可以自己研究。我们要实现的是，点击一个选择下拉框选择后，另一个选择下拉框动态关联其对应的值，如下：主选择为省，关联选择为市，数据库中分别有省、市的表，省表字段中有SF_ID、SF_NAME，市表字段中有CY_ID、CY _ NAME、CY_SFID:

！-省份-select class=' chzn-select ' id=' sheng fen ' name=' sheng fen ' onchange=' setcity()；'Data-placeholder='请选择一个省'选项值=' '/选项值=' ' all/option c : foreach items=' $ { SF list } ' var=' SF '选项值=' $ { SF . SF _ id } ' c : if test=' $ { PD . sfid==SF。' SF_ID} '已选择/c:if${sf。SF _ NAME }/option/c : foreach/select！-city-select class=' chzn-select ' id=' city ' name=' city ' data-placeholder='请选择一个城市'选项值=' '/选项值=' ' all/option c : foreach items=' $ { Cylist } ' var=' cy '选项值='${cy。CY _ ID } ' c : if test=' $ { PD . CyID==CY。选择了“CY _ ID }”/c : if $ { CY。CY _ NAME }/Option/c : foreach/select在这里初始化时，后台从数据库中取出数据，并将值传输到页面，后台根据情况使用ModeView和PageData。

首先在主选择省份增加onChange方法，表示选择变化的触发，即修改省份后，城市对应下拉框中的值也会发生变化，对应的处理方式为setCity()。我们使用ajax获取数据，数据在js中处理如下：

//下拉框动态关联函数setCity(){//get ID var sfId=$(' # ShengFen ')。所选省份的val()；$.ajax({ type : 'POST '，url : 'SFAndCity/setCity.do '，数据： { ' sfId ' :sfId }，dataType : 'json '，success :函数(data){ var cyList=data . cyList；//删除以前的绑定数据$(“# City选项”)。移除()；//美化选择(可删除)var _ option=' option value=\ ' \_ option='/option '；_ option=' option value=\ ' \_ option=' all/option '；//绑定数据if(cfList cyList.length！=0){ $('选择[name=City]')。追加(_ option)；for(var I=0；icyList.lengthI){ var option=' option value=\ ' Cylist。CY _ ID ' \option='' cyList。CY _ NAME '/选项'；$(“选择[名称=城市]”)。追加(选项)；} }else{ $('选择[name=City]')。追加(_ option)；}//确保jQuery所选插件的动态绑定数据生效$ ('# city ')。触发器(' Liszt : updated ')；$('#City ')。choose()；} });}最后是后台处理，如下：

@RequestMapping(值='/setCity ')@ ResponseBodypublic MapString，Object setCity(){ MapString，Object map=new HashMapString，Object()；page DATa PD=new page DATa()；请尝试{ PD=this . getpage data()；string SfID=PD . GetStrIng(' SfID ')；//与ajax中交付的pd.put('CY_SFID '，SFID)保持一致；ListPageData Cylist=CyServiCe . ListCityByFid(PD)；map.put('cyList '，Cylist)；//与ajax中得到的返回图一致；}捕获(异常e){ }返回地图；}当然，上面的数据采集是根据你自己的实际代码编写的，主要是采集数据并返回。

摘要

以上是边肖介绍的jQuery Ajax实现Select多级关联和动态绑定数据的示例代码。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！