Question

我正在使用jQuery填充下拉列表。但是，当我从已填充的下拉列表中选择一个值时，将返回该键。

HTML是：

<div class="col-md-2">
  <div class="form-select-group">
    <label for="selectRegion">Select Region:</label>
    <select class="form-control" id="selectRegion" name="selectRegion">
      <option value="" disabled selected>Select your State first</option>
    </select>
  </div>
</div>

jQuery是：

$(document).ready(function() {
  $('#selectState').on('change', function() {
    $.ajax({
      type: "POST",
      url: "RegionView",
      cache: false,
      data: $(selectState).serialize(),
      success: function(data) {
        $('#ajaxGetUserServletResponse').text(data);
      }
    }).done(function(responseJson) {
      dataType: "json",
      // Clear options
      $("#selectRegion").find("option").remove();
      $('#selectRegion').append($('<option value="" disabled selected>Select your Region</option>'));
      $("#selectDistrict").find("option").remove();
      $('#selectDistrict').append($('<option value="" disabled selected>Select your Region first</option>'));
      $("#selectGroup").find("option").remove();
      $("#selectSection").find("option").remove();
      $("#selectSubSection").find("option").remove();
      // Loop through JSON response
      $.each(responseJson, function(key, value) {  $('<option>').val(key).text(value).appendTo($("#selectRegion"));
      });
    });
  });
});

$(document).ready(function() {
  $('#selectRegion').on('change', function() {
    //do something here
    //alert($("#accountName").val());
    $.ajax({
      type: "POST",
      url: "DistrictView",
      cache: false,
      data: $(selectRegion).serialize(),
      success: function(data) {
        $('#ajaxGetUserServletResponse').text(data);
      }
    }).done(function(responseJson) {
      dataType: "json",
      // Clear options
      $("#selectDistrict").find("option").remove();
      $('#selectDistrict').append($('<option value="" disabled selected>Select your District</option>'));
      $("#selectGroup").find("option").remove();
      $('#selectGroup').append($('<option value="" disabled selected>Select your District first</option>'));
      $("#selectSection").find("option").remove();
      $("#selectSubSection").find("option").remove();
      // Loop through JSON response
      $.each(responseJson, function(key, value) {  $('<option>').val(key).text(value).appendTo($("#selectDistrict"));
      });
    });
  });
});

第一个函数接收一个＆＃34; State＆＃34;并将其传递给java以获取＆＃34; Regions＆＃34;的列表与＆＃34;州＆＃34;相关联。这个＆＃34;地区＆＃34;显示为下拉列表。当我选择一个＆＃34; Region＆＃34;我想返回一个＆＃34;区＆＃34;显示在下一个下拉列表中。但是，如果我选择第五个选项（Sydney North），则键（4）将返回到java而不是＆＃34; Sydney North＆＃34;。如何获取值而不是键？

接收Region的Java是：

@WebServlet("/DistrictView")
public class DistrictView extends HttpServlet {
  private static final long serialVersionUID = 1 L;
  @Override
  public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    String region = request.getParameter("selectRegion"); // From bootstrap
    response.getWriter().write("Region = " + region);
    MySQLConnection.getConnection();
    List < String > listDistricts = MySQLConnection.listGroupDistricts(region);
    if (listDistricts == null || listDistricts.isEmpty()) {
      response.getWriter().write("No Districts in this Region.");
    } else {
      String json = new Gson().toJson(listDistricts);
      response.setContentType("application/json");
      response.setCharacterEncoding("UTF-8");
      response.getWriter().write(json);
    }
  }
}

当我使用以下内容填充下拉列表时：

$.each(responseJson, function(key, value) {
  $('<option>').val(key).text(value).appendTo($("#selectRegion"));
});

response.getWriter().write("Region = " + region);返回＆＃34; Region = 4＆＃34;。我期待＆＃34;悉尼北部＆＃34;被通过（这是我选择的）。

当我将其替换为：

$.each(responseJson, function(key, value) {
  $('<option>').val(value).text(value).appendTo($("#selectRegion"));
});

然后response.getWriter().write("Region = " + region);不返回任何内容。

我希望有临时显示＆＃34; response.getWriter（）。write（＆＃34; Region =＆＃34; + region）;＆＃34;为了显示我选择的实际值（不是密钥），java将使用该值查询数据库并返回一个区域列表，这些区域将被$('#selectRegion').on('change', function() {代码填充到下一个下拉列表中。

我试过这个：

var selectedText = $("#selectRegion").find("option:selected").text();
    alert("Selected Text: " + selectedText);
    $.ajax({
        type: "POST",
        url: "DistrictView",
        cache: false,
        data: $(selectedText).serialize(),
        success: function(data){
            $('#ajaxGetUserServletResponse').text(data);
        }
    })

警报显示＆＃34;所选文字：悉尼北部＆＃34;。但是，java显示器显示＆＃34; data：$（selectedText）.serialize（），＆＃34;传递＆＃34; null＆＃34;到java WebServlet。

Answer 1

替换：

// Loop through JSON response
$.each(responseJson, function(key, value) {  
    $('<option>').val(key).text(value).appendTo($("#selectRegion"));
});

使用：

$.each(responseJson, function(key, value) {
    $('<option>').text(value).appendTo($("#selectRegion"));
});

而且，在java中，替换：

String region = request.getParameter("selectRegion"); // From bootstrap

使用：

String[] region = request.getParameterValues("selectRegion"); // From bootstrap
String region0 = region[0];

并将所有对“region”的进一步引用替换为“region0”。

从下拉列表中选择将返回键而不是值

1 个答案: