如何從選擇框中選擇多個選項
[英]How to choose more than one option from a select box
問題描述
我想知道如何從選擇框中選擇多個選項，如下所示：
<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 個解決方案
解決方案1
12 2009-02-07 19:59:21
您所要做的就是在選擇框中使用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
通常，如果在標記中使用“multiple”選項，則HTML表單將允許您從組合框中按Ctrl鍵單擊多個選項。您還可以使用“Shift-Click”作為一系列值。
但有趣的問題是如何實現這一點，以便超過10％（估計）的用戶可以弄清楚如何使用它？
解決方案3
1 2009-02-07 20:11:21
為了在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鍵然后選擇其他選項來選擇多個選項。
解決方案4
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>
我希望這有幫助。
謝謝，
馬修米勒
解決方案5
0 2015-09-04 20:44:20
我在這里很晚，但會嘗試發布我的答案。 可能不是最好的。
將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;
解決方案6
0 2009-02-07 20:00:52
如何選擇多個項目？ CTRL +單擊選項。
如何在一個搜索框的“從PDO編寫的SELECT語句中選擇一個以上的搜索條件”？
[英]How to have more than one search criteria in a SELECT FROM PDO Prepared Statement for a search box?
如何避免蛋糕PHP中選擇框的選項數組中的一個或多個元素
[英]How to avoid one or more elements in option array of select box in cake php
如何禁用所有小於第二選擇框的選擇框？
[英]How to disable all option second select box that can be less than to first select box selected option?
如何選擇一個<select>選項值自動來自 URL 參數？
[英]How to choose a <select> option value automatically from an URL parameter?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.