jquery操作select的联动插件FillOptions&CascadingSelect
详细介绍看这里http://blog.csdn.net/lee576/archive/2008/11/24/3362512.aspx
html中的2个普通select
<select id="province"></select><select id="city"></select>
先倒入2个插件：
<script language="javascript" type="text/javascript" src="js/jQuery.FillOptions.js"></script>
<script language="javascript" type="text/javascript" src="js/jQuery.CascadingSelect.js"></script>
$("#province").FillOptions( "flexGridServlet.do?action=getProvince", { datatype:"json", textfield:"province", valuefiled:"provinceID", //selectedindex:0,//填充并选中第1项 keepold:true//填充并且保留原有项 });$("#province").AddOption("请选择省份：","-1",true,0);//最上端插入一个文本为“请选择省份“，值为”-1“的列表项，并且是选中状态$("#city").AddOption("请选择城市：","-1",true,0);$("#province").CascadingSelect( $("#city"),//需要联动的下拉列表框，必须 "flexGridServlet.do?action=getCity", {datatype:"json",textfield:"city",valuefiled:"cityID",parameter:"p"},//通过设置parameter:”p”这个参数会生成一个"handler1.ashx?p=xxx”这样的地址来做ajax请求 function(){//完成联动后执行 //log.info("测试"); });
java代码处理2个请求
if("getProvince".equals(action)){System.out.println("--------------------getProvince--------------------");//String json="[{'provinceID':'110000','province':'北京市'}," +//"{'provinceID':'120000','province':'天津市'}," +//"{'provinceID':'310000','province':'上海市'}" +//"]";String path=this.getServletContext().getRealPath("/")+"province.txt";//这个文件中的内容就是上面注释掉的jsonBufferedReader br=new BufferedReader(new InputStreamReader(new FileInputStream(path),"UTF-8")); StringBuffer sb=new StringBuffer(); String s; while((s=br.readLine())!=null){ sb.append(s); } br.close(); String json=sb.toString(); System.out.println("json="+json); /*xml测试 String xml="<DocumentElement>" + "<table><provinceID>110000</provinceID><province>北京市</province></table>" + "<table><provinceID>120000</provinceID><province>天津市</province></table>" + "<table><provinceID>310000</provinceID><province>上海市</province></table>" + "</DocumentElement>"; response.getWriter().write(xml); */ /*非文件测试 JSONArray array=new JSONArray();try {for(int i=0;i<5;i++){JSONObject object = new JSONObject();object.append("provinceID", "11000"+i);object.append("province", "北京市"+i);array.put(object);}} catch (JSONException e) {e.printStackTrace();}System.out.println("object="+array.toString());response.getWriter().write(array.toString());*/response.getWriter().write(json);response.getWriter().flush();response.getWriter().close();return;}if("getCity".equals(action)){System.out.println("--------------------getCity--------------------");String json="";String provinceID=request.getParameter("p");System.out.println("provinceID="+provinceID);if(provinceID.equals("110000")){json="[{'cityID':'1','city':'北京'}]";}else if(provinceID.equals("120000")){json="[{'cityID':'2','city':'天津'}]";}else if(provinceID.equals("310000")){json="[{'cityID':'3','city':'上海'}]";}else if(provinceID.equals("130000")){json="[{'cityID':'4','city':'石家庄'}," +"{'cityID':'5','city':'石家庄2'}"+"]";}else{json="[]";}System.out.println("object="+json);response.getWriter().write(json);response.getWriter().flush();response.getWriter().close();return;}
添加一个列表项的插件AddOption（已整合进FillOptions），这个比较简单，用来向下拉列表框中添加一个列表项。
定义如下：
AddOption (text,value,selected,index)
参数说明：
text：文本型，列表项文本
value：文本型，列表项值
selected：布尔型，是否选择加入的列表项
index：数值型，加入位置
实例如下：
$("#select2").AddOption("请选择城市","-1",true,0);
实例说明：
向select2最上端插入一个文本为“请选择城市”，值为”-1“的列表项，并且是选中状态
/////////////////////////////
在FillOptions()下增加
/*解决ie浏览器的刷新 selected的不起作用
http://support.microsoft.com/kb/185123/zh-cn */
if($.browser.msie &&
selected) {
$('option',this).attr('selected',true);
}
页:
[1]