このようなフォームを作成したいと思います。これは、 AvailableとSeletetedの選択タグの間の個々の要素またはすべての要素を追加/削除できます。
送信ボタンを押すと、フォームはSelectedからサーブレット バックエンド プロセスに情報を送信します。
だから私の質問は：
jqueryが使えると仮定して
2つの選択がmultiselect1あり、choosenItems
以下から選択したアイテムをコピーしますmultiselect1
var options = $('select.multiselect1 option:selected').sort().clone();
for (var i = 0; i < options.length; i++) {
$('select.choosenItems').append(options[i]);
}
だから私の addAll 関数のために
$('.addAll').on('click', function() {
var options = $('select.multiselect1 option').sort().clone();
for (var i = 0; i < options.length; i++) {
$('select.choosenItems').append(options[i]);
}
}
私のサーブレットに提出するために、私はjqueryも使用しています。
$(".choosenItems option").each(function() {
chosenStr = chosenStr + "&chItems=" + $(this).val();
});
loadUrl = "myServlet?" + event + '&' + chosenStr;
そして、通常のjquery ajax呼び出し
$.ajax({
type: "GET",
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
async: true,
url: loadUrl,
success: function(data){
// something
}
});
上記のクエリを解決するために使用されるテクノロジーは、HTML、CSS、JavaScript、およびサーブレットです。
選択されていないアイテムを避けるために、Javascript検証も適用されます
以下のアクション サーブレット コードを見つけてください。
package com.formselection;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/FormSelection")
public class FormSelection extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
PrintWriter out = null;
try {
out=response.getWriter();
response.setContentType("text/html");
String[] selected = request.getParameterValues("s_groups");
if (selected != null) {
out.println("Below are your Selected options: ");
for (String s : selected) {
out.println("<br/> " + s);
}
}else{
out.println("You have not Selected any option");
}
} catch (Exception e) {
e.printStackTrace();
} finally {
out.close();
}
}
}
formSelection.html の以下のコードを見つけてください。
<!DOCTYPE html>
<html>
<head>
<title>Form Selection</title>
</head>
<body>
<form action="FormSelection" method="post">
<div id="available_groups" style="float: left;margin: 10px;">
Available Groups<br />
<select multiple name="a_groups" id="a_groups" style="position:relative; border: 2px solid black; margin: 5px; padding: 5px;" size="6">
<option value="Group one">Group one</option>
<option value="Group two">Group two</option>
<option value="Group three"> Group three </option>
<option value="Group four">Group four</option>
<option value="Group five">Group five</option>
<option value="Group six">Group six</option>
<option value="Group seven">Group seven</option>
</select>
</div>
<div id="select_buttons" style="position: relative; float: left;" >
<button type="button" name="multiple_select" style="margin-top: 35px;margin-bottom: 5px;" onclick="getMultipleSelectedValues()">=></button><br/>
<button type="button" name="single_select" style="margin-top: 5px;margin-bottom: 5px;" onclick="getSingleSelectedValue()">-></button><br/>
<button type="button" name="single_deselect" style="margin-top: 5px;margin-bottom: 5px;" onclick="setSingleDeSelectedValue()"><-</button><br/>
<button type="button" name="multiple_deselect" style="margin-top: 5px;margin-bottom: 5px;" onclick="setMultipleDeSelectedValue()"><=</button><br/>
</div>
<div style="position: relative; float: left;margin: 10px;">
Selected Groups<br />
<select multiple name="s_groups" id="s_groups" style="position:relative; border: 2px solid black; margin: 5px; padding: 5px;" size="6">
</select>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<input type="submit" value="Submit" style="position:absolute;left: 150px;" onclick="setSelectedValues()"/>
</form>
<script type="text/javascript">
//Function to select multiple values
function getMultipleSelectedValues() {
//fetch all available options
var e = document.getElementById("a_groups");
//fetch all selected options from available group
var selectedOptions = e.selectedOptions;
//get the selected group to append the selected options
var s_select = document.getElementById('s_groups');
//If items are not selected display alert message
if (e.selectedOptions.length < 1) {
alert("Please select atleast one item that need to be added");
} else {
//create option elements for selected group
for (var i = 0; i < e.selectedOptions.length; i++) {
var opt = document.createElement('option');
opt.value = selectedOptions[i].value;
opt.text = selectedOptions[i].text;
s_select.appendChild(opt);
}
//remove option element from available group once they are selected.
for (var i = 0; i < e.options.length;) {
if (e.options[i]!=null && e.options[i].selected == true) {
e.options[i].remove(i);
i--;
} else {
i++;
}
}
}
}
//Function to select single value
function getSingleSelectedValue() {
//fetch all available options
var e = document.getElementById("a_groups");
//get the selected group to append the selected options
var s_select = document.getElementById('s_groups');
//If more than one option is selected display alert message
if (e.selectedOptions.length > 1) {
alert("Please select only one item to be added");
} else if (e.selectedOptions.length < 1) {
alert("Please select one item that need to be added");
} else {
//add the selected option to selected group
var opt = document.createElement('option');
opt.value = e.selectedOptions[0].value;
opt.text = e.selectedOptions[0].text;
s_select.appendChild(opt);
//remove the selected option from available group
e.selectedOptions[0].remove(0);
}
}
//Function to de-select single value
function setSingleDeSelectedValue() {
//fetch all selected options
var e = document.getElementById("s_groups");
//get the available group to append the selected option
var s_select = document.getElementById('a_groups');
//If more than one option is selected display alert message
if (e.selectedOptions.length > 1) {
alert("Please select only one item to be removed");
} else if (e.selectedOptions.length < 1) {
alert("Please select one item to be removed");
} else {
//add the selected option to available group
for (var i = 0; i < e.selectedOptions.length; i++) {
var opt = document.createElement('option');
opt.value = e.selectedOptions[i].value;
opt.text = e.selectedOptions[i].text;
s_select.appendChild(opt);
}
//remove the selected option from selected group
e.selectedOptions[0].remove(0);
}
}
//Function to de-select multiple values
function setMultipleDeSelectedValue() {
//fetch all selected options
var e = document.getElementById("s_groups");
//get the available group to append the de-selected options
var s_select = document.getElementById('a_groups');
//If items are not selected display alert message
if (e.selectedOptions.length < 1) {
alert("Please select atleast one item that need to be removed");
} else {
//create option elements for available group
for (var i = 0; i < e.selectedOptions.length; i++) {
var opt = document.createElement('option');
opt.value = e.selectedOptions[i].value;
opt.text = e.selectedOptions[i].text;
s_select.appendChild(opt);
}
//remove the selected options from selected group
for (var i = 0; i < e.options.length;) {
if (e.options[i]!=null && e.options[i].selected == true) {
e.options[i].remove(i);
i--;
} else {
i++;
}
}
}
}
//Function to set all selected values in s_groups
function setSelectedValues() {
var e = document.getElementById("s_groups");
for (var i = 0; i < e.options.length; i++) {
e.options[i].selected = true;
}
}
</script>
</body>
</html>