Как выбрать более одного варианта из поля выбора - PullRequest
Новая
       269

Как выбрать более одного варианта из поля выбора

2 голосов
/ 07 февраля 2009

Я хочу знать, как мы можем выбрать более одного варианта из поля выбора, как показано ниже: 

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

Спасибо

Ответы [ 6 ]

12 голосов
/ 07 февраля 2009

Все, что вам нужно сделать, это использовать множественный атрибут в поле выбора. 

<select name="some-select" id="some-select" multiple="multiple">
    <option>Black</option>
    <option>White</option>
    <option>Other</option>
</select>
1 голос
/ 07 февраля 2009

для использования нескольких значений для именованного параметра в массивах $_GET / $_POST / $_REQUEST в PHP, вы должны назвать свое поле формы следующим образом: 

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 голос
/ 07 февраля 2009

Обычно HTML-форма позволяет вам щелкать Ctrl-Click по нескольким параметрам в поле со списком, если вы используете параметр «несколько» в теге. Вы также можете использовать «Shift-Click» для диапазона значений.

Но интересный вопрос заключается в том, как вы можете реализовать это так, чтобы более 10% (предполагаемых) пользователей могли понять, как его использовать?

0 голосов
/ 04 сентября 2015

Я опоздал сюда, но постараюсь опубликовать мой ответ. не может быть лучшим.

Добавьте атрибут 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 голосов
/ 26 августа 2009

У меня была такая же проблема, и ребята из 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 голосов
/ 07 февраля 2009

Как выбрать несколько предметов? CTRL + клик по опциям.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...