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

刺骨的言语ヽ痛彻心扉 2022-09-28 13:03 10阅读 0赞

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][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][https_github.com_ljheee_CourseSchedulingSystem]

[http_download.csdn.net_detail_ljheee_9777839]: http://download.csdn.net/detail/ljheee/9777839
[https_github.com_ljheee_CourseSchedulingSystem]: https://github.com/ljheee/CourseSchedulingSystem