JQuery、JSON、Spring MVC - 动态加载选择选项

JQuery, JSON, Spring MVC - Dynamically loading select options

提问by RKodakandla

I have a jsp form like this... Values in the second select box, state should be loaded based on value in first select box (country),. I am using AJAX, JSON, Spring MVC to retrieve results.

我有一个这样的 jsp 表单......第二个选择框中的值，状态应该根据第一个选择框（国家/地区）中的值加载。我正在使用 AJAX、JSON、Spring MVC 来检索结果。

index.jsp.....

index.jsp.....

<form:form name="myform" modelAttribute="search" action="POST">
    <form:input path="firstName" class="text" />
    <form:input path="lastName" class="text" />
    <form:select path="country" id="country">
         <form:option value="" label="--Choose A Value--"></form:option>
         <form:options items="${countryList}" itemValue="id"   itemLabel="name"></form:options>
     </form:select>
        <form:select path="state" onchange="javascript:itemFocus('submit');" id="state">
          <form:option value="" label="--Choose A Value--"></form:option>
          <form:options items="${stateList}" itemValue="id" itemLabel="description"></form:options>
     </form:select>
     <form:checkboxes items="${skillsList}" path="skills" itemLabel="description" itemValue="id" delimiter="<br>" />
      <form:checkboxes items="${languagesList}" path="languages" itemLabel="description" itemValue="id" delimiter="<br>" />

    </form:form>

controller....

控制器....

   @RequestMapping(value="stateslist.html")
   public @ResponseBody List<State> sectionList(@ModelAttribute("search") SearchForm search, @RequestParam(value="countryId", required=true) String countryId, ModelMap modelMap){
    return stateService.getStates(countryId);
   }

JQuery part....

JQuery 部分....

   <script type="text/javascript" charset="utf-8">
     function getStates(){
        $.getJSON(
             "stateslist.html", 
             {countryId: $('#country').val()},
             function(data) {
                  var html = '';
                  var len = data.length;
                  for(var i=0; i<len; i++){
                       html += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
                   }
                  $('#state').append(html);
             }
          );
 }

      $(document).ready(function() {
         $('#country').change(function()
          {   getStates();
          });
      });
</script>

I can see form the debugger that the ajax request is getting submitted to the the Spring controller and it does returns a list of State objects, which contains fields like id, name etc... Problem is that the state select options are not changing.. seems to be that function(data){....}part is not working..can someone help me where I am doing wrong here...

我可以从调试器中看到 ajax 请求被提交到 Spring 控制器，它确实返回了一个 State 对象列表，其中包含 id、name 等字段......问题是状态选择选项没有改变。 . 似乎那function(data){....}部分不起作用..有人可以帮助我在这里做错了什么......

---Update---

- -更新 - -

I have removed everything from the callback function and just had thi..

我已经从回调函数中删除了所有内容，只是有了这个..

function(data){alert("something");}

even this didn't work... that mean call never reached that part...

即使这也不起作用......这意味着呼叫从未到达那部分......

回答by danny.lesnik

I have the same code where city (cityId) values are changed according to country (countryId) selection. It works perfect:

我有相同的代码，其中城市 (cityId) 值根据国家 (countryId) 选择而更改。它工作完美：

$("select#countryId").change(function(){
         $.getJSON("getCityList.do",{countryCode: $(this).val()}, function(j){
              var options = '';
              for (var i = 0; i < j.length; i++) {
                options += '<option value="' + j[i].id + '">' + j[i].name + '</option>';
              }
              $("select#cityId").html(options);
            });
        });

So I think you just need to add "select" prefix.

所以我认为你只需要添加“选择”前缀。

回答by FuSsA

Im updating your controller method to avoid an 406 Not AcceptableError:

我正在更新您的控制器方法以避免406 Not Acceptable错误：

@RequestMapping(value="stateslist.json")
    @ResponseStatus(HttpStatus.OK)
   public @ResponseBody List<State> sectionList(@ModelAttribute("search") SearchForm search, @RequestParam(value="countryId", required=true) String countryId, ModelMap modelMap){
    return stateService.getStates(countryId);
   }

and your JQuery part:

和你的 JQuery 部分：

<script type="text/javascript" charset="utf-8">
     function getStates(){
        $.getJSON(
             "stateslist.json", 
             {countryId: $('select#country').val()},
             function(data) {
                  var html = '';
                  var len = data.length;
                  for(var i=0; i<len; i++){
                       html += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
                   }
                  $('select#state').append(html);
             }
          );
 }

      $(document).ready(function() {
         $('#country').change(function()
          {   getStates();
          });
      });
</script>

回答by Brahmaiah C

Add the below dependency to your pom.xml:

将以下依赖项添加到您的pom.xml：

<dependency>
    <groupId>com.fasterxml.Hymanson.core</groupId>
    <artifactId>Hymanson-databind</artifactId>
    <version>2.5.0</version>
</dependency>

Finally add @ResponseBodyannotation in your controller class.

最后@ResponseBody在您的控制器类中添加注释。