Die Auswahl aus einem Dropdown-Feld gibt den Schlüssel statt des Werts

Question

zurück. Ich bearbeite ein Dropdown-Menü mit jQuery. Wenn ich jedoch einen Wert aus der Dropdownliste wähle, die ausgefüllt wurde, wird der Schlüssel zurückgegeben.

Die HTML ist:

<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> 

Die jQuery ist:

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

Die erste Funktion ein „Staat“ und übergibt sie an die Java die Liste der „Regionen“ zu erhalten, die mit der Staat". Diese Liste der "Regionen" wird als Dropdown angezeigt. Wenn ich eine "Region" auswähle, möchte ich eine Liste von "Districts" zurückgeben, die im nächsten Dropdown-Menü angezeigt werden. Wenn ich jedoch die fünfte Option (Sydney North) wähle, wird die Taste (4) anstelle von "Sydney North" an das Java zurückgegeben. Wie bekomme ich den Wert statt des Schlüssels?

Die Java, die die Region erhält, ist:

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

Wenn ich das nach dem Drop-Down zu füllen:

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

Die response.getWriter().write("Region = " + region); returns "Region = 4". Ich erwarte "Sydney North" (was ich ausgewählt habe).

Wenn ich ersetzen diese mit:

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

Dann wird die response.getWriter().write("Region = " + region); nichts zurück.

Ich erwarte die temporäre Anzeige "response.getWriter(). Write (" Region = "+ Region);" Um den tatsächlichen Wert anzuzeigen, den ich ausgewählt habe (nicht den Schlüssel), verwendet der Java diesen Wert, um die Datenbank abzufragen und eine Liste von Distrikten zurückzugeben, die bis zum nächsten Dropdown-Code mit dem Code $('#selectRegion').on('change', function() { gefüllt werden.

Ich habe dies versucht:

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

Der Alarm zeigt "Ausgewählter Text: Sydney Nord". Das Java-Display zeigt jedoch an, dass "data: $ (selectedText) .serialize()" dem Java-WebServlet "null" übergibt.

Answer 1

ersetzen:

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

mit:

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

Und in der Java ersetzen:

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

mit:

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

und ersetzen Sie alle weiteren Verweise auf "region" durch "region0".