ドロップダウンから選択すると、値の代わりにキーが返されます

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")); 
     }); 
    }); 
    }); 
}); 

最初の関数は、「状態」を受信し、関連付けられた「地域」のリストを取得するためにJavaに渡し状態"。この「地域」リストはドロップダウンとして表示されます。 「地域」を選択すると、「地区」のリストを戻して、次のドロップダウンに表示したいと考えています。しかし、5番目のオプション（シドニー・ノース）を選択すると、キー（4）が「シドニー・ノース」の代わりにjavaに戻されます。キーの代わりに値を取得するにはどうすればよいですか？

リージョンを受けJavaは次のとおりです。

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

response.getWriter().write("Region = " + region);リターン "リージョン= 4"：

@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(value).text(value).appendTo($("#selectRegion")); 
}); 

その後response.getWriter().write("Region = " + region);は何も返しません。

私は一時的な表示 "response.getWriter（）。write（" Region = "+ region）;"を期待しています。選択した実際の値（キーではない）を表示するために、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); 
     } 
    }) 

アラートが表示される "選択したテキスト：シドニー北"。ただし、Javaの表示では、 "data：$（selectedText）.serialize（）"がjava WebServletに "null"を渡しています。

Answer 1

置き換えます、

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

そして、Javaで置き換えます：で

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

を

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

で：

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

を参照し、「region」のすべての参照を「region0」に置き換えます。