jquery操作select的联动插件FillOptions&CascadingSelect

gundumw100

详细介绍看这里
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[value='+selected+']',this).attr('selected',true);
}