logo标签列表

如何从下拉框中选择多个选项

phpjavascripthtmlcss
3
我想知道如何从下面给出的选择框中选择多个选项：
<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>

谢谢

1
为什么要对问题进行投票否定呢？如果你没有答案，那就不回答，或者发表评论，但不要无缘无故地对其进行投票否定。这是一个合法的问题。已经被投票到0了。 - Christian Nunciato
6个回答
12

您只需要在select框上使用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键并选择其他选项来选择多个选项。
1
通常情况下，如果您在标签中使用“multiple”选项，则HTML表单将允许您从组合框中Ctrl-Click多个选项。您还可以使用“Shift-Click”选择一系列值。
但有趣的问题是，如何实现这一点，以便超过10％（估计）的用户可以弄清楚如何使用它？
Wayne，如果那是一个实际的答案而不是评论，我会点赞的。好链接。 - Chuck
1

我来晚了，但是会尽力回答。可能不是最好的答案。

在选择器中添加 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;
0

我曾经遇到过同样的问题，而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>

希望这能有所帮助。

谢谢，

马修·米勒

0
如何选择多个项目？使用 CTRL+单击选项。
我猜那是更直接的答案 :) - nickohrn
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接