<option>...</option>
...
</select>
按住ctrl点击左键即可多选
select标记有一个属性multiple，将其设置成multiple="multiple"按住Ctrl键即可实现多选。 请看例子：<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>无标题文档</title>
</head>
<script language="javascript">
function getValue()
{
var s = ""
for(var i=0i<form1.ss.options.lengthi++)
{
if(form1.ss.options[i].selected)
{
s+=form1.ss.options[i].value
}
}
alert(s)
}
</script>
<body>
<form id="form1" name="form1" method="post" action="">
请选择：
<select id="ss" name="ss" size="5" multiple="multiple">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<br>
<input type="button" name="Submit" value="提交" onclick="getValue()" />
</form>
</body>
</html>
**************************补充**********************
修改select标签的size属性，把它的值改为1即可。
<html><head>
<meta http-equiv="Content-Type" content="text/html charset=gbk">
<title>grid</title>
</head>
<body>
<input type="button" value="getSelect" onclick = "getSelect()"/>
<input type="button" value="selectbtn" onclick = "getSelAge()"/>
<div>
<select name="selectAge" id="selectAge">
<option value="1">18-21</option>
<option value="2">22-25</option>
<option value="3">26-29</option>
<option value="4">30-35</option>
<option value="5">Over35</option>
</select>
</div>
<p>
<input type="button" value="moreSelect" onclick = "moreSelect()"/>
<div>
<div>多选 须要添加 multiple属性<br>
在多选中size属性 能够初始化下拉框默认显示几个选项
</div>
<div>
<select name="moreselAge" id="moreselAge" multiple="multiple">
<option value="1">18-21</option>
<option value="2">22-25</option>
<option value="3">26-29</option>
<option value="4">30-35</option>
<option value="5">Over35</option>
<option value="6">Over40</option>
<option value="7">Over50</option>
</select>
</div>
</div>
<p></p>
<input type="button" value="addNewbtn" onclick = "addNewSelections()"/>
<input type="button" value="deletebtn" onclick = "deleteselections()"/>
<input type="button" value="deleAllbtn" onclick = "deleteAllSelections()"/>
<div>selectName :<input type="text" id="txtName"/></div>
<div>selectValue:<input type="text" id="txtValue"/></div>
<div>
<select name="moreselAge" id="addNew">
<option value="1" selected>18-21</option>
<option value="2">22-25</option>
<option value="3">26-29</option>
<option value="4">30-35</option>
<option value="5">Over35</option>
<option value="6">Over40</option>
<option value="7">Over50</option>
</select>
</div>
<p>移动选项</p>
<p>
<table>
<tr collspan="2">
<td>
<div>
<select name="moreselAge" id="move1" multiple="multiple" size="7">
<option value="1">18-21sfiods</option>
<option value="2">22-25sjdfd</option>
<option value="3">26-29xxs</option>
<option value="4">30-35vs</option>
<option value="5">Over35dcff</option>
<option value="6">Over40shhfsd</option>
<option value="7">Over50sdefs</option>
<option value="8">Over88www</option>
</select>
</div>
</td>
<td width="100" align="center">
<input type="button" value=">" onclick = "rightSingle()" /><br>
<input type="button" value=">>" onclick = "rightAll()"/><br>
<input type="button" value="<" onclick = "leftSingle()"/><br>
<input type="button" value="<<" onclick = "leftAll()"/>
</td>
<td>
<div>
<select name="moreselAge" id="move2" multiple="multiple" size="7">
<option value="1">18-21</option>
<option value="2">22-25</option>
<option value="3">26-29</option>
<option value="4">30-35</option>
<option value="5">Over35</option>
<option value="6">Over40</option>
<option value="7">Over50</option>
<option value="8">Over88</option>
</select>
</div>
</td>
<tr>
</table>
</body>
<script type="text/javascript">
//获得下拉列表对象
oListbox = document.getElementById("selectAge")
var ListUtil = new Object()
var selectbtn = document.getElementById("selectbtn")
function getSelAge (){
//访问选项
alert(oListbox.options[1].firstChild.nodeValue) //显示的内容
alert(oListbox.options[1].getAttribute("value"))//相应的value
alert("获得它在集合中的位置== " + oListbox.options[2].index) //获得它在集合中的位置
alert("获得集合的元素个数长度== " + oListbox.options.length) //获得集合的元素个数长度
}
/*************************************************************************************************/
//获得选中选项
function getSelect(){
var indx = oListbox.selectedIndex
alert("获得选中的选项的索引 "+ indx )
}
//多选下拉框
var moreselAgeList = document.getElementById("moreselAge")
/*******************************************************************/
//入参 下拉框对象
ListUtil.getSelectIndexes = function (oListbox){
var arrIndexes = new Array()
for(var i=0 i<oListbox.options.lengthi++){
//假设该项被选中则把该项相应的索引加入到数组中
if(oListbox.options[i].selected){
arrIndexes.push(i)
}
}
return arrIndexes //返回选中的选项索引
}
/***************************************************************/
// 多选
function moreSelect(){
var arrIndexes = ListUtil.getSelectIndexes(moreselAgeList)
alert("选中的数组length = "+ arrIndexes.length + " 选中的选项索引为 ："+ arrIndexes)
}
/************************加入新选项***************************************************************/
//
var addNewLisbox = document.getElementById("addNew") //获得下拉框对象
var otxtName = document.getElementById("txtName") //name 文本框
var otxtValue = document.getElementById("txtValue") //value 文本框
//加入方法
ListUtil.addOptions = function(oListbox,sName,sValue){
var arryV = new Array()
//标记输入的值能否够加入
var isAdd = false
//推断是否有反复的值
for(var i =0 i<oListbox.options.lengthi++){
var sv = oListbox.options[i].getAttribute("value")
if(sv == sValue){
alert("不能加入反复的value")
return
}else{
isAdd = true
}
}
if(isAdd || oListbox.options.length == 0){
//以下使用dom方法创建节点
var oOption = document.createElement("option")// 创建option元素
oOption.appendChild(document.createTextNode(sName))
//由于选项的值不是必须的，所以假设传入了值 则加入进来
if(arguments.length == 3){
oOption.setAttribute("value",sValue)
}
oListbox.appendChild(oOption) //把选项加入进列表框
alert("加入成功!!")
} // end if(isAdd)
}
//加入button的点击事件方法
function addNewSelections(){
var txtname = otxtName.value
var txtvalue = otxtValue.value
if(txtname != "" && txtvalue != ""){
ListUtil.addOptions(addNewLisbox,txtname,txtvalue)//加入新项
otxtName.value = ""
otxtValue.value = ""
}else{
alert("请输入要加入的值和name")
return
}
}
/*******************删除选中选项****************************************************************/
//传入下拉框对象和(索引)
ListUtil.deleteOptons = function(oListbox){
var selIndex = oListbox.selectedIndex
if(oListbox.options.length == 0){
alert("列表中无元素可删除")
return
}
oListbox.remove(selIndex) //删除选中的选项
}
//删除button点击事件
function deleteselections(){
ListUtil.deleteOptons(addNewLisbox)
}
/**********删除全部***********************************************************************/
ListUtil.deletsAllOptions = function(oListbox){
if(oListbox.options.length != 0){
for(var i= oListbox.options.length-1i>=0i--){ //倒着删除是由于
oListbox.remove(i)
}
}else{
alert("该列表为空!")
}
}
function deleteAllSelections(){
ListUtil.deletsAllOptions(addNewLisbox)
}
/*******移动选项***************************************************************************************/
//获得下拉框
var move1Listbox = document.getElementById("move1") //左边下拉框
var move2Listbox = document.getElementById("move2") //右边下拉框
//移动一个或多个选中的选项
ListUtil.move = function(oListboxFrom ,oListboxTo){
//var idx1 = oListboxFrom.selectedIndex
var arrIndexes = ListUtil.getSelectIndexes(oListboxFrom)
var oOption
if(arrIndexes.length == 0 ){
alert("请选择至少一个选项!")
return
}else{
for(var i=oListboxFrom.options.length-1i>=0i--){
oOption = oListboxFrom.options[i]
if(oOption.selected && oOption != null ){
oListboxTo.appendChild(oOption)
}
}
}
}
//向右移 一个元素
function rightSingle(){
ListUtil.move(move1Listbox,move2Listbox)
}
//向左移 一个元素
function leftSingle(){
ListUtil.move(move2Listbox,move1Listbox)
}
ListUtil.moveAll = function(oListboxFrom,oListboxTo){
for(var i=oListboxFrom.options.length-1i>=0i--){
oOption = oListboxFrom.options[i]
//alert(oOption)
oListboxTo.appendChild(oOption)
}
}
//向右移全部选项
function rightAll(){
ListUtil.moveAll(move1Listbox,move2Listbox)
}
//向左移全部选项
function leftAll(){
ListUtil.moveAll(move2Listbox,move1Listbox)
}
</script>
</html>
