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

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

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

благодаря

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

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

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

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

чтобы использовать несколько значений для именованного параметра в массивах $_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, а затем выбрав другие параметры.

Как выбрать несколько элементов? CTRL + Нажмите «Параметры».

У меня была такая же проблема, и ребятам на htmlforums удалось найти способ.

Вот ссылка на форум:

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

И heres ответ: (у меня не было времени адаптировать его к вашему коду, извините)

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

Надеюсь, это поможет.

Благодаря,

Мэтью Миллар

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

Добавьте 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>

и php мог бы сделать что-то вроде этого

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