jQuery选择插件分为基本版和美化版,重点说下美化版,如下图所示:
相比最原始的版本,美化后的选择插件可以说是很漂亮了且功能更加强大(这里不说了,自行发掘吧)。这里主要是添加了它的特有属性并调用<代码> class=" chzn-select:
jsp页面:
& lt;选择类=" chzn-select " id=按搿钡拿?按搿北?
……
& lt;/select>
js页面:
$ (" .chzn-select ") .chosen ();
注意引用jQuery的js,有多种版本,建议使用高版本,如jquery-1.9.1.min.js。
下面进入到主题,选择绑定数据是很常见的,但大多数都是静态的或者数据确定的,这些其实都很好处理,我们需要的是动态绑定且多级关联的。
通过下面的实例来看看是如何一步步处理的:
这里我只选择二级关联,更复杂的大家可以在充分掌握后再自行研究。我们要实现的是点击一个选择下拉框选择后,另一个选择下拉框动态关联其对应的值,如下主选择是省份,关联的选择是城市,数据库分别存在省份和城市的表,省份表字段有SF_ID和SF_NAME,城市表字段有CY_ID, CY__NAME, CY_SFID(关联的省份ID):
& lt; !——省份——比;
& lt;选择类=" chzn-select " id=" ShengFen " name=" ShengFen "数据占位符=扒胙≡袷》荨北?
& lt;选项值=" "祝辞& lt;/option>
& lt;选项值=薄霸谌? lt;/option>
& lt; c: foreach项=" $ {sfList} " var=翱苹谩北?
& lt;选项值=" https://www.yisu.com/zixun/$ {sf.SF_ID} " & lt; c:如果测试=" $ {pd。sfId==sf.SF_ID}”在selected在$ {sf.SF_NAME}
& lt;/option>
& lt;/c: foreach>
& lt;/select>
& lt; !——城市——比;
& lt;选择类=" chzn-select " id="城市" name="城市"数据占位符=扒胙≡癯鞘小北?
& lt;选项值=" "祝辞& lt;/option>
& lt;选项值=薄霸谌? lt;/option>
& lt; c: foreach项=" $ {cyList} " var=癱y”比;
& lt;选项值=" https://www.yisu.com/zixun/$ {cy.CY_ID} " & lt; c:如果测试=" $ {pd。cyId==cy.CY_ID}”在selected在$ {cy.CY_NAME}
& lt;/option>
& lt;/c: foreach>
& lt;/select>
这里初始化的时候后台从数据库取数传值到页面,后台使用的是ModeView和PageData,大家视情况而定。
首先给主选择省份添加onChange方法,表示选择更改的触发,即省份修改后城市对应的下拉框中的值也要变化,对应的处理方法是setCity(),我们使用ajax的方式来获取数据,如下在js中处理:
//下拉框动态关联
函数setCity () {//获取选择的省份的ID
var sfId=$ (" # ShengFen”) .val ();
. ajax({美元
类型:“文章”,
url:“SFAndCity/setCity.do”,
数据:{“sfId”: sfId},
数据类型:“json”,
成功:功能(数据){
var cyList=data.cyList;//移除以前的绑定数据
$(" #城市选择”).remove ();//美化一下选择(可以去除)
var _option=" & lt;选项值=https://www.yisu.com/" \ ";
_option +=白４? lt;/option>”;
_option +=& lt;选项值=https://www.yisu.com/" \ ";
_option +=痹谌? lt;/option>”;//绑定数据
如果(cfList,,cyList。长度!=0){
$("选择[name=城市]").append (_option);
我(var=0; i< cyList.length;我+ +){
var选项=" & lt;选项值=https://www.yisu.com/薄? cyList.CY_ID +“\”;
选择+="在" + cyList.CY_NAME +“& lt;/option>”;
$("选择[name=城市]").append(选项);
}
其他}{
$("选择[name=城市]").append (_option);
}//保证jQuery的选择插件动态绑定数据生效
$(" #城市”).trigger(“李斯特:更新”);
$(" #城市”).chosen ();
}
});
}
最后就是后台的处理了,如下:
@RequestMapping (value=" https://www.yisu.com/setCity ")
@ResponseBody
公共Map<字符串,Object>setCity () {
Object> Map<字符串;地图=new HashMap<字符串,Object> ();
PageData pd=new PageData ();
尝试{
pd=this.getPageData ();
字符串sfId=pd.getString (“sfId”);//和ajax中传递的保持一致
pd.put (“CY_SFID”, sfId);
ListcyList=cyService.listCityBysfId (pd);
map.put (“cyList”, cyList);//和ajax中获取的保持一致
返回地图;
}捕捉(异常e) {
}
返回地图;
}
