JS给<select>的<option>赋值&JS发异步请求获取后台列表

        HTML的下拉框<select>标签里面的各个选项option，有时候不能写死，尤其在实现多个下拉框<select>多级联动的时候，后继<select>的option往往需要动态添加。

        动态添加option主要有2种：一是用JS添加静态数据，第二种是需要从servlet等后台获取特定的列表，再给<option>赋值。

一、用JS添加静态数据到option

1、JS方式：

var selid =document.getElementById("sltid");
for(var i=0; i<10;i++){     //循环添加多个值
   document.all.selectId.options[i]= new Option(i,i);// selectId是指定<select>标签的id
}

2、JQuery方式：

$("#selectId").append("<optionvalue='"+value+"'>"+text+"</option>");

小结：这两种方式都是JS直接给<select>的<option>赋值，这样使用很简单，并且要求<option>数据选项全都定义在JS脚本块中。而实际应用中，很多多级联动的<select>，后继<option>是通过JS发异步请求获取后台列表再给<option>赋值的。

二、JS发异步请求给servlet，获取后台列表再给<option>赋值

        第一种方式用JS添加静态数据到option，要求<option>数据选项全都定义在JS脚本块中，在实现多级联动时，前级下拉框<select>不选择，后继下拉框<select>中的选项不能初始化；后继下拉框<select>中的选项可能需要从后台获取。而且下拉框<select>的选项option通常是多个备选值，就像第一种方式js代码一样，需要循环添加option。此时，自然想到用jstl里面有<c:forEach>标签，于是我的第一个错误版本出现了：

$.post('selectMajorServlet', {name:currTeacher} ,function(jsonArray) {
    document.all.selMajor.options[document.all.selMajor.length] = newOption("ljh",'');
    $("#selMajor").removeAttr("disabled");

    vari=0;
    <c:forEach var="item" items="${tList}">
       document.all.selMajor.options[i++] = new Option(item.name,i);
    </c:forEach>   
   });

为什么说错误呢？

        jstl的标签会转化为服务器端的代码执行，而js代码则在客户端执行。因此js脚本块中不能添加jstl循环语句<c:forEach>，js脚本块是服务器发给浏览器，让浏览器执行的。
        但是在js中可以获取到后台作用域中的值，要在value上加上""，比如一个从服务器端返回的数据可以这样赋值给js的变量。如：

         var result = "${result}"; 

        如果js脚本在jsp文件中，用el表达式有效果  alert("${msgs.addFullName}");

那么后台处理好的数据放在List(java.util.List)中，js并没有List类型，那怎么接收呢?这时就需要用json类型了。

前台代码：

$.post('selectMajorServlet', {name:currTeacher} ,function(jsonArray) {
      
     document.all.selMajor.options[document.all.selMajor.length]= new Option("ljh",'');
     $("#selMajor").removeAttr("disabled");
 
     for(var i=0; i<jsonArray.length;i++){     //循环添加多个值
        document.all.selMajor.options[i] = newOption(jsonArray[i].level+jsonArray[i].name+jsonArray[i].numStudent+'--'+jsonArray[i].group,i);
     }
  },"json");

      前台用js发送异步post请求到Servlet，执行成功回调function返回json数组jsonArray，并用for循环给option赋值。

后台代码：

List<?> list = readXls.getTeacherTeachesByName(name);

JSONArrayjsonArray = JSONArray.fromObject(list);
resp.getWriter().print(jsonArray);
resp.getWriter().flush();

        后台处理好数据放在List中，转成json数组，发给前台。

注意：这里使用json-lib-2.1-jdk15.jar，依赖的jar包好几个（

commons-beanutils-1.7.0.jar 

commons-collections-3.1.jar
commons-lang-2.1.jar 

commons-logging.jar
ezmorph-1.0.2.jar ）。

这里免费一次性下载：http://download.csdn.net/detail/ljheee/9777839

 

补充：

jQuery获取Select选择的Text和Value:

1.$("#select_id").change(function(){//code...});   //为Select添加事件，当选择其中一项时触发

2. varcheckText=$("#select_id").find("option:selected").text();  //获取Select选择的Text

3. var checkValue=$("#select_id").val();  //获取Select选择的Value

4. var checkIndex=$("#select_id").get(0).selectedIndex;  //获取Select选择的索引值

5. var maxIndex=$("#select_idoption:last").attr("index");  //获取Select最大的索引值

jQuery添加/删除Select的Option项：

1. $("#select_idoption:last").remove();  //删除Select中索引值最大Option(最后一个)

2. $("#select_idoption[index='0']").remove();  //删除Select中索引值为0的Option(第一个)

3. $("#select_idoption[value='3']").remove();  //删除Select中Value='3'的Option

4. $("#select_idoption[text='4']").remove();  //删除Select中Text='4'的Option

案例：https://github.com/ljheee/CourseSchedulingSystem