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";//这个文件中的内容就是上面注释掉的json
			BufferedReader 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);
}

• CascadingDropDown.rar (327.3 KB)
• 下载次数: 515