如何创建一个带有 2 个 select 标签的表单，将此 select 中的元素添加到另一个 select 中，并处理表单提交？

Question

我想创建一个这样的表单，我可以在 Available 和 Seleteted[= 之间添加 add/remove individual/all 元素30=] select 标签。

点击提交按钮时，表单会将 Selected 中的信息提交给 servlet 后端进程。

所以我的问题是：

如何创建上面的表单，将数据绑定到 Available，处理 4 个按钮来移动元素？

如何在点击提交按钮时将所有数据从 Selected 发送到服务器？

Answer 1

假设您可以使用 jquery

我有两个选择 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]);
    }
}

为了提交到我的 servlet，我也在使用 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                        
    }  
});

Answer 2

解决上述查询使用的技术有HTML、CSS、JavaScript和Servlets。

Javascript 验证也被应用，以避免未选择的项目

请查找以下操作 servlet 代码：

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>

如何创建一个带有 2 个 select 标签的表单，将此 select 中的元素添加到另一个 select 中，并处理表单提交？

How to create a form with 2 select tag, adding element from this select to another select, and handle form submission?

html

javascript

picklist