堆栈内存溢出
  简体   繁体   English

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

[英]How to choose more than one option from a select box

 原文  2009-02-07 19:57:00  3   6    php/ javascript/ html/ css

问题描述

i want to know how can we select more than one option from a select box like given below: 我想知道如何从选择框中选择多个选项，如下所示： 

<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>

Thanks 谢谢

6 个解决方案

解决方案1
 12  2009-02-07 19:59:21

All you have to do is use the multiple attribute on the select box. 您所要做的就是在选择框中使用multiple属性。 

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

解决方案2
 1  2009-02-07 20:04:53

Ordinarily an HTML form will allow you to Ctrl-Click multiple options from a combo box, if you use the "multiple" option in the tag.You can also use "Shift-Click" for a range of values. 通常，如果在标记中使用“multiple”选项，则HTML表单将允许您从组合框中按Ctrl键单击多个选项。您还可以使用“Shift-Click”作为一系列值。

But the interesting question is how can you implement this so that more than 10% (estimated) of users can figure out how to use it? 但有趣的问题是如何实现这一点，以便超过10％（估计）的用户可以弄清楚如何使用它？

解决方案3
 1  2009-02-07 20:11:21

inorder to use multiple values for a named parameter in $_GET / $_POST / $_REQUEST arrays in PHP, you have to name your form field like this: 为了在PHP中的$_GET / $_POST / $_REQUEST数组中为命名参数使用多个值，您必须将表单字段命名为： 

name="myFieldName[]";

by puting the braces at the end of the name of the field, PHP will be able to store multiple values for that paramter. 通过将大括号放在字段名称的末尾，PHP将能够为该参数存储多个值。 if you are using multiple checkboxes, or multiple selects, you should name your fields like this. 如果您使用多个复选框或多个选择，您应该像这样命名您的字段。 and don't forget the values for HTML option tags. 并且不要忘记HTML选项标记的值。

in your case, the HTML should be like this: 在您的情况下，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>

your PHP code that is the action of the form can have the data like this. 作为表单操作的PHP代码可以包含这样的数据。 

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

when you are viewing your HTML page, you can select multiple options by holding the Ctrl key and then selecting other options. 当您查看HTML页面时，可以通过按住Ctrl键然后选择其他选项来选择多个选项。

解决方案4
 0  

I've had this same problem, and the guys at htmlforums managed to come up with a way. 我遇到了同样的问题，而htmlforums的那些人设法想出办法。

Heres the forum link: 继承人论坛链接：

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

And heres the answer: (i havn't had time to adapt it to your code, sorry) 接下来是答案:(我没有时间适应你的代码，对不起） 

    <!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>

I hope this helps. 我希望这有帮助。

Thanks, 谢谢，

Matthew Millar 马修米勒

解决方案5
 0  2015-09-04 20:44:20

I was late here but will try post my answer. 我在这里很晚，但会尝试发布我的答案。 may not be the best. 可能不是最好的。

Add multiple attribute to the select and change name="color" to an array like name="color[]" 将multiple属性添加到select并将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>

and php could do something like this 和PHP可以做这样的事情 

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

解决方案6
 0  2009-02-07 20:00:52

How to select multiple items? 如何选择多个项目？ CTRL+Click the Options. CTRL +单击选项。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 从选择选项下拉列表中计算多个值 - Calculating more than one value from select option dropdown 如何检查是否选择了多个选择框 - How to check if more than one select box is selected 如何在一个搜索框的“从PDO编写的SELECT语句中选择一个以上的搜索条件”？ - How to have more than one search criteria in a SELECT FROM PDO Prepared Statement for a search box? 如何从4个以上的多个选项中选择我想要的值 - How to select the value i want from more than 4 multiple option 如何避免蛋糕PHP中选择框的选项数组中的一个或多个元素 - How to avoid one or more elements in option array of select box in cake php 在更新中，如何从选择框中选择一个选项？ - in an update, how to select an option from a select box? 无法将日期范围插入多个 select 选项标签 - Fail to insert date range to more than one select option tag 如何禁用所有小于第二选择框的选择框？ - How to disable all option second select box that can be less than to first select box selected option? 如何选择多个数据库 - How to select more than one database 如何选择一个<select>选项值自动来自 URL 参数？ - How to choose a <select> option value automatically from an URL parameter?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM