jquery-ajax请求后台数据转换json显示在select下拉列表&&jquery获取下拉列表的值和显示内容的方法

ゝ一世哀愁。 2022-06-06 04:36 320阅读 0赞

======================================jquery-ajax请求后台数据转换json显示在select下拉列表

之前运用jquery-ajax请求后台struts2数据，返回到页面的回调函数都是以html格式的，得到的为String字符串。即便在使用xml格式化或解析的情况下，也是一html标签形式来显示格式化后或解析过的xml。最近需要得到的数据在页面动态显示在select下拉列表中，思考过后决定使用json数据格式方便。

要运用json，首先下载需要的jar包，我使用的是json-lib-1.1-jdk13.jar,由于包种还关联其它jar包，所以还需下载相关包，总共7个。

![20130510090838879][]

下载地址：[json lib][]

js：

**\[java\]**  [view plain][] [copy][view plain] [print][view plain] [?][view plain]

1.  $(document).ready(function()\{  
2.          var aa=document.getElementById("aa").value;  
3.          $.ajax(\{  
4.                  url : encodeURI("getSelect.action?aa="\+aa),  
5.                  type : 'POST',  
6.                  dataType : "json",  
7.                  success : function(data) \{  
8.                      var bb =$(document).find("\#bb");  
9.                      pub\_platform.empty();  
10.                     **for** ( var i = 0; i < data.length; i++) \{  
11.                         bb.append("<option value='"\+data\[i\]+"'>"\+ data\[i\]+ "</option>");  
12.                     \}  
13.                 \}  
14.             \});  
15.     \});

后台操作简单，只需根据页面传参数获取数据库列表信息，以下是action中将查询到的list转换json：

**\[java\]**  [view plain][] [copy][view plain] [print][view plain] [?][view plain]

1.  JSONArray jsonArray = JSONArray.fromObject(list);  
2.            
3.          response.getWriter().print(jsonArray);  
4.

====================jquery获取下拉列表的值和显示内容的方法

![复制代码][Image 1]

页面的下拉列表：
    选择时间段：
    <select name="timespan" id="timespan" class="Wdate"   >
                               <option value="1">8:00-8:30</option>
                               <option value="2">8:30-9:00</option>
                               <option value="3">9:00-9:30</option>
    </select>
    当选中最后一个值后，需要取得选中对应的value和text值。如图：

jquery取下拉列表选中值和文本的代码：
    
    var obj = $("#timespan option:selected");
    var  artime_val  = obj.val();
    var  artime_text  = obj.text();
    alert("val:"+artime_val+" text"+ artime_text );//val:3 text 9:00-9:30

![复制代码][Image 1]

[20130510090838879]: /images/20220606/3c017a6c8cfe48df8d05c649cf45deef.png
[json lib]: http://vdisk.weibo.com/file/list
[view plain]: http://blog.csdn.net/caisenbin2009/article/details/8908993#
[Image 1]: