Jquery动态添加option的问题

Question

各位朋友周末好，我在学习jquery的时候。遇到了一个问题。
我从后台action返回了一个json的字符串数据。
想在页面加载的时候为select添加初始值。但是始终没有任何效果。jsp页面  <dd>
    <select class="combox" id="menuupperid" name="menu.upperid" class="required">
    </select>
  </dd><script type="text/javascript">
  $(document).ready(function(){
    $.ajax({
      type: "POST",
      url: "initMenu",
      dataType: "json",
      success: function(data){
        //var jsonObj = jQuery.parseJSON(data);
        //var jsonObj = eval("("+ data +")");
        alert(data);
        $("#menuupperid").empty();  
        $.each(data,function(index,value){ 
          $("#menuupperid")[0].options.add(new Option(value.menuCname,value.id,false,false)); 
        });
      }
    }); 
  }); 
</script>当我的dataType返回的是json的时候。alert(data)将会弹出[object Object],[object Object],[object Object]信息。
而当我修改返回值类型为html的时候。alert(data)将会弹出字符串[{"xxx":xxx,"xxx":xxx,"xxx":xxx},{"xxx":xxx,"xxx":xxx,"xxx":xxx},{"xxx":xxx,"xxx":xxx,"xxx":xxx}]此类的信息。当我each的时候我查询value.menuCname和value.id的时候也能alert出正确的信息。但就是加载不到select上因为对JQUERY不是很熟。比对着api和网上的例子。但就是无法实现效果。希望大家能帮我看看。谢谢！！

Answer 1

只要你返回的格式正确。是可以添加的啊
直接测试的代码
  <dd>
    <select class="combox" id="menuupperid" name="menu.upperid" class="required">
    </select>
  </dd>
  <script type="text/javascript">
    $(document).ready(function () {
      data = [{ "id": "1", "menuCname": "2", "xxx": "3" }, { "id": "12", "menuCname": "22", "xxx": "32"}];
      $("#menuupperid").empty();
      $.each(data, function (index, value) {
        $("#menuupperid")[0].options.add(new Option(value.menuCname, value.id, false, false));
      });
    }); 
  </script>

Answer 2

你返回的是字符串，应该是这种格式[{ "id": "1", "menuCname": "2", "xxx": "3" }, { "id": "12", "menuCname": "22", "xxx": "32"}];

Answer 3

不行就dataType: "text"或"html",
在  $("#menuupperid").empty(); 之前加一句 data=eval(data);

Answer 4

细看了下，问题是出在你写的JSON格式不对了。
下面的
new Option(value.menuCname, value.id, false, false));这里的第一个参数要求是字串类型。而JSON中如果是字串类型，要求字串的值用双引号引起来，而你上面的显示，却没有一个引起来的值（引起来的是只是键名称）。所以修改一下返回的JSON格式，把字串类型的值用双引号引起来就差不多了。

Answer 5

这两天一直没有上网。今天刚看到。见谅。请问：json格式中必须是String:String的格式存在的吗？如果我返回的是一个int类型的数值。那么必须转换成字符串才可以的吗？
谢谢各位大力帮助。

Answer 6

int类型应该不用的，json本身就是一串字符串。

Answer 7

我测试了，还是不行。我直接将字符串写死测试的，页面不知道为什么无法添加到select中。
  @Action(value = "/initMenu")
  public String doInitMenu() {
    String id = getRequest().getParameter("ID");
    id = null == id ? "0" : id;
    try {
      getResponse().setCharacterEncoding("UTF-8");
      String str = JsonUtil.getJsonStr(menuSvc.queryByUpperId(id));
      str = "[{\"id\":\"1\",\"menuCname\":\"系统\"},{\"id\":\"2\",\"menuCname\":\"测试\"},{\"id\":\"3\",\"menuCname\":\"姓名\"}]";
      PrintWriter out = getResponse().getWriter();
      out.println(str);
      System.out.println(str);
      //out.flush();
      //out.close();
    } catch (IOException e) {
      addActionError(e.toString());
    }    return NONE;
  }页面代码没变。后台输出的str数据是
[{"id":"1","menuCname":"系统"},{"id":"2","menuCname":"测试"},{"id":"3","menuCname":"姓名"}]
难道说这种格式不是json数据？还是前端页面代码有问题呢？谢谢！！

Answer 8

把$("#menuupperid")后面的[0]去掉，另外$("#menuupperid").options.add(new Option(value.menuCname,value.id,false,false));只能对IE有作用，在火狐下兼容。 

Answer 9

我将后面的[0]去掉。页面一直提示正在加载当中。也无法添加。
我使用的是IE9，不过在兼容环境下和ie9版本中。都是无法添加到select中。难道这种添加的语法有错误？

Answer 10

我吧楼主的代码简化一下，可以啊。
data.jsp
   <%@ page language="java" contentType="text/html; charset=UTF-8"%>
    <%
      response.setCharacterEncoding("UTF-8");
           String str = "[{\"id\":\"1\",\"menuCname\":\"系统\"},{\"id\":\"2\",\"menuCname\":\"测试\"},{\"id\":\"3\",\"menuCname\":\"姓名\"}]";
        out.println(str);
     %>url: "initMenu"改成我自己的“http://127.0.0.1:8080/SysManage/bak/data.jsp"IE8 和火狐下都可以

Answer 11

   不用写了  去用一个联动下来狂的插件 你只要把json数据给他 它自动帮你添加到指定的select里边 还是带三级联动的哦

Answer 12

既然在each中alert是正确的,那说明数据是没有问题的.问题在于:
 $("#menuupperid")[0].options.add(new Option(value.menuCname,value.id,false,false)); 
可以添加有问题.建议楼主调试一下,单独
 $("#menuupperid")[0].options.add(new Option(value.menuCname,value.id,false,false)); 
调试看看.1.确定数据是否正确,在each中打印
2.确实向标签里添加子标签是否正确