Hinzufügen/Entfernen mehr Zeilen dynamisch mit jquery und jstl Dropdown

Question

Ich möchte neue Zeilen mit Dropdown-Liste mit jQuery hinzufügen, während Sie auf addrow Schaltfläche klicken.

Also verwende ich JSTL-Tags in meiner JSP-Datei, um Dropdown-Liste zu erstellen.

Wenn ich neue Zeile mit addrow Schaltfläche mit jQuery erstellen, mag ich diese neue Dropdown-Liste die gleichen Werte (countryList) als die Standard-Drop-Down-Liste anzuzeigen, die zum ersten Mal erstellt wird (vor neue Zeile Button hinzufügen).

Wie erstellt man die Zeilen mit jQuery?

SimpleFormController:

protected Map referenceData(HttpServletRequest request) throws Exception { 
    Map referenceData = new HashMap(); 
    Map<String,String> country = new LinkedHashMap<String,String>(); 
    country.put("US", "United Stated"); 
    country.put("CHINA", "China"); 
    country.put("SG", "Singapore"); 
    country.put("MY", "Malaysia"); 
    referenceData.put("countryList", country); 
} 

Form: Optionen:

<form:select path="country"> 
    <form:option value="NONE" label="--- Select ---"/> 
    <form:options items="${countryList}" /> 
</form:select> 

Beispiel:

JSFiddle

Hinweis: Über jsFiddle ist nur als Referenz. Hallo

Answer 1

dieses should't ein Problem zu tun, es so aussehen:

//Execute this on button click 
$('#countries').append($('<option>', 
{ 
    value: "China", 
    text : "China" 
})); 

https://jsfiddle.net/b734fgcf/

Die HTML und js ausgeführt werden, nachdem die jsp erzeugt, um es wie ein ganz normaler HTML sein sollte Jquery-Modifikation. Wenn Sie diese Daten an den Server zurücksenden möchten, liegt möglicherweise ein Sicherheitsproblem vor. Viel Glück :)