如何从选择框中选择多个选项答案

【问题标题】：How to choose more than one option from a select box如何从选择框中选择多个选项
【发布时间】：2010-10-06 04:26:04
【问题描述】：

我想知道如何从如下所示的选择框中选择多个选项：

<label for="color">Colors</label>
<select class="inputbox" name="color" id="color" style="width:180px;">
    <option value="Black">Black</option>
    <option value="White">White</option>
    <option value="Tan">Tan</option>
    <option value="Navy">Navy</option>
    <option value="RoyalBlue">Royal Blue</option>
    <option value="Red">Red</option>
    <option value="Yellow">Yellow</option>
    <option value="Hunter(DarkGreen)">Hunter(Dark Green)</option>
    <option value="Kelly(Green)">Kelly(Green)</option>
    <option value="Burgundy">Burgundy</option>
 </select>

谢谢

【问题讨论】：

为什么要否决这个问题？如果您没有答案，请不要回答或发表评论，但不要无缘无故地投反对票。这是一个合理的问题。赞成为 0。

标签： php javascript html css

【解决方案1】：

您所要做的就是使用选择框上的 multiple 属性。

<select name="some-select" id="some-select" multiple="multiple">
    <option>Black</option>
    <option>White</option>
    <option>Other</option>
</select>

【讨论】：

【解决方案2】：

为了在 PHP 中的 $_GET/$_POST/$_REQUEST 数组中为命名参数使用多个值，您必须像这样命名表单字段：

name="myFieldName[]";

通过将大括号放在字段名称的末尾，PHP 将能够为该参数存储多个值。如果您使用多个复选框或多个选择，您应该像这样命名您的字段。并且不要忘记 HTML 选项标签的值。

在你的情况下，HTML 应该是这样的：

<select name="some-select[]" id="some-select" multiple="multiple">
<option value="balck">Black</option>
<option value="white">White</option>
<option value="other">Other</option>
</select>

作为表单操作的 PHP 代码可以包含这样的数据。

$mySelectValues = $_REQUEST['some-select'];
// mySelectValues is an array now
foreach ($mySelectValues as $selected) {
    echo $selected;
}

当您查看 HTML 页面时，您可以通过按住 Ctrl 键然后选择其他选项来选择多个选项。

【讨论】：

【解决方案3】：

通常，如果您在标记中使用“多个”选项，HTML 表单将允许您按住 Ctrl 键并单击组合框中的多个选项。您也可以使用“Shift 键单击”来获取一系列值。

但有趣的问题是如何实现这一点，以便超过 10%（估计）的用户能够弄清楚如何使用它？

【讨论】：

韦恩，如果这是一个实际的答案而不是评论，我会投票赞成。很好的链接。

【解决方案4】：

我来晚了，但会尝试发布我的答案。可能不是最好的。

将multiple 属性添加到选择并将name="color" 更改为类似name="color[]" 的数组

<label for="color">Colors</label>
<select class="inputbox" name="color[]" id="color" style="width:180px;" multiple>
    <option value="Black">Black</option>
    <option value="White">White</option>
    <option value="Tan">Tan</option>
    <option value="Navy">Navy</option>
    <option value="RoyalBlue">Royal Blue</option>
    <option value="Red">Red</option>
    <option value="Yellow">Yellow</option>
    <option value="Hunter(DarkGreen)">Hunter(Dark Green)</option>
    <option value="Kelly(Green)">Kelly(Green)</option>
    <option value="Burgundy">Burgundy</option>
 </select>

而php可以做这样的事情

foreach ($_POST['color'] as $selectedColor)
echo $selectedColor."\n";
//and this echos a comma separated string
$colorString=implode(",", $_POST['color']);
echo $colorString;

【讨论】：

【解决方案5】：

如何选择多个项目？ CTRL+单击选项。

【讨论】：

我想这是更字面的答案:)

【解决方案6】：

我也遇到过同样的问题，htmlforums 的人想出了一个办法。

这是论坛链接：

http://www.htmlforums.com/client-side-scripting/t-select-multiple-items-without-ctrl-117760.html

这是答案：（我没有时间将其调整为您的代码，抱歉）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Select Test</title>

        <meta name="keywords" content="" />
        <meta name="description" content="" />

        <script type="text/javascript">

            // Variables we need
            var previous    = new Array();
            var lastClicked = '';

            // We are going to attach event listeners, no code at the bottom or anything hard coded...
            function addEvent(obj, evType, fn)
            { 
                if(obj.addEventListener)
                {
                    obj.addEventListener(evType, fn, false);
                    return true;
                }
                else if(obj.attachEvent)
                {
                    var r = obj.attachEvent('on' + evType, fn);
                    return r;
                }
                else
                {
                    return false; 
                } 
            }

            // Let's begin when the DOM is ready
            addEvent(window, 'load', begin);

            // Attach the handlers to our selects
            function begin()
            {
                addSelect('numbers');
                addSelect('sm');
                addSelect('sm2');
            }

            // We add a couple of handlers to each
            function addSelect(id)
            {
                var sel = document.getElementById(id);
                addEvent(sel, 'click', whichElement);
                addEvent(sel, 'click', addRemoveClicked);
            }

            // Find which element we are looking at on this click
            function whichElement(e)
            {
                if(!e)
                {
                    var e = window.event;
                }

                if(e.target)
                {
                    lastClicked = e.target;
                }
                else if(e.srcElement)
                {
                    lastClicked = e.srcElement;
                }

                if(lastClicked.nodeType == 3) // Safari bug
                {
                    lastClicked = lastClicked.parentNode;
                }
            }

            // Make sure we are displaying the correct items
            function addRemoveClicked(e)
            {
                if(!previous[this.id])
                {
                    previous[this.id] = new Array();
                }

                // Remember what has been used
                if(previous[this.id][lastClicked.value] == 1)
                {
                    previous[this.id][lastClicked.value] = 0;
                }
                else
                {
                    previous[this.id][lastClicked.value] = 1;
                }

                var selectBox = document.getElementById(this.id);

                // Add correct highlighting
                for(var i = 0; i < selectBox.options.length; i++)
                {
                    selectBox.options[i].selected = '';

                    if(previous[this.id][selectBox.options[i].value] == 1)
                    {
                        selectBox.options[i].selected = 'selected';
                    }
                }
            }
        </script>
    </head>

    <body>
        <form name="selectTest" action="">

            <select name="numbers" id="numbers" multiple="multiple" size="6"> 
                <option value="1">One</option>
                <option value="2">Two</option>
                <option value="3">Three</option>
                <option value="4">Four</option>
                <option value="5">Five</option>
            </select>

            <select name="sm" id="sm" multiple="multiple" size="6">
                <option value="a">To make</option>
                <option value="b">Multiple</option>
                <option value="c">Selections</option>
                <option value="d">Just Click</option>
                <option value="e">With The</option>
                <option value="f">Mouse</option>
            </select>

            <select name="sm2" id="sm2" multiple="multiple" size="6">
                <option>Everything</option>
                <option>Is</option>
                <option>Possible</option>
                <option>Until</option>
                <option>Proven</option>
                <option>Otherwise</option>
            </select>

        </form>
    </body>
    </html>

我希望这会有所帮助。

谢谢，

马修·米勒

【讨论】：