发表新帖
发表新帖

How to choose more than one option from a select box

后端 未结
关注
6 697
旧巷少年郎
旧巷少年郎 2021-01-22 11:47

i want to know how can we select more than one option from a select box like given below:
提交评论
  •  加载中...
  • 时光取名叫无心
    2021-01-22 12:27

    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[]" 

    <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

    foreach ($_POST['color'] as $selectedColor)
echo $selectedColor."\n";
//and this echos a comma separated string
$colorString=implode(",", $_POST['color']);
echo $colorString;
    0 讨论(0)
  • 爱一瞬间的悲伤
    2021-01-22 12:29

    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.

    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?

    0 讨论(0)
  • [愿得一人]
    2021-01-22 12:33

    How to select multiple items? CTRL+Click the Options.

    0 讨论(0)
  • 日久生厌
    2021-01-22 12:39

    All you have to do is use the multiple attribute on the select box.

    <select name="some-select" id="some-select" multiple="multiple">
    <option>Black</option>
    <option>White</option>
    <option>Other</option>
</select>
    0 讨论(0)
  • 春和景丽
    2021-01-22 12:43

    I've had this same problem, and the guys at htmlforums managed to come up with a way.

    Heres the forum link:

    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

    0 讨论(0)
    •  看不清?
    提交回复
    热议问题