select多选问题

最新推荐文章于 2026-01-05 12:22:51 发布

原创最新推荐文章于 2026-01-05 12:22:51 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #input #generator #div #javascript #html

如果想讓 select 呈現多選狀態則設置它的屬性 multiple, 就可以實現多選。

但是會有一個問題：如果想選擇多個選項，就必須用按 shift 或者 ctrl 或鼠標拖動，如果不想這樣操作，想直接通過點擊操作的話，可以按以下方法實現。

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

< html >

< head >

< title > New Document </ title >

< meta name = "Generator" content = "EditPlus" >

< meta name = "Author" content = "" >

< meta name = "Keywords" content = "" >

< meta name = "Description" content = "" >

</ head >

< body >

< select id = "oselect" name = "cars" size = "10" multiple >

< option value = "BMW" > 宝马 </ option >

< option value = "Porsche" > 保时捷 </ option >

< option value = "Benz" > 奔驰 </ option >

< option value = "Santana" > 桑塔纳 </ option >

< option value = "LK" > 林肯 </ option >

< option value = "?" > 标志 </ option >

< option value = "Bus" > 大公共 </ option >

</ select >

< input type = "button" id = "btnShowSelected" value = " 查看选中项索引 " >

</ body >

< script language = "JavaScript" >

String.prototype.trimEnd = function (trimString) {

var re = new RegExp(trimString + "*$" , "g" );

return this .replace(re, "" );

};

Array.prototype.indexOf = function (itemValue) {

var nIndex = -1;

for ( var i = 0; i < this .length; i++) {

if ( this [i] == itemValue)

nIndex = i;

}

return nIndex;

};

var oSpan = document.getElementById( "spaOutput" );

var oSele = document.getElementById( "oSelect" );

var oBtn = document.getElementById( "btnShowSelected" );

oBtn.onclick = function () {

alert(getSelectedIndexes(oSele));

};

function getSelectedIndexes(oSele) {

var sSelectedIndexes = "" ;

var separator = "," ;

for ( var i = 0; i < oSele.options.length; i++) {

if (oSele.options[i].selected)

sSelectedIndexes += i.toString() + separator;

}

if (sSelectedIndexes == "" )

return new Array(0);

else

return sSelectedIndexes.trimEnd(separator).split(separator);

}

oSele.onclick = function () {

this .selectedIndexes = getSelectedIndexes( this );

if ( this .selectedIndexes.length == 1) {

var nSelectedIndex = parseInt( this .selectedIndexes[0]);

if (!isNaN(nSelectedIndex))

this .options[nSelectedIndex].selected = false ;

}

};

oSele.onchange = function () {

var j = this .selectedIndexes.indexOf( this .selectedIndex.toString());

if (j > -1) {

this .options[ this .selectedIndex].selected = false ;

this .selectedIndexes.splice(j, 1);

}

if ( this .selectedIndexes.length > 0) {

var nSelectedIndex;

for ( var i = 0; i < this .selectedIndexes.length; i++) {

nSelectedIndex = parseInt( this .selectedIndexes[i]);

this .options[nSelectedIndex].selected = true ;

}

</ script >

</ html >

此方法可以實現，但是也會有一個弊端，就是它選擇的時候會出現閃爍的情況，給人不是很好的感覺。所以最後，通過在網上查詢，得知最好的方法就是可以使用層來模擬 textarea

< html >

< head >

< title > Test </ title >

</ head >

< body bgcolor = "#336699" >

< div id = haiwa style = "background-color: #eeeeee; border: 1 solid #000000; width: 120; height: 120;overflow:auto" >

< div style = "height:20px;cursor:default;font-family: tahoma;font-size: 12px; font-weight: bold" onclick =haiwa.style.height=" 120";document.all.haiwa.scrolltop = 0 >

< input type = checkbox style = height:15px; name = ck id = ck1 >< label for = ck1 > 第一項 </ label >

</ div >

< div style = "height:20px;cursor:default;font-family: tahoma;font-size: 12px; font-weight: bold" onclick =haiwa.style.height=" 120";document.all.haiwa.scrolltop = 0 >

< input type = checkbox style = height:15px; name = ck id = ck2 >< label for = ck2 > 第二項 </ label >

</ div >

< div style = "height:20px;cursor:default;font-family: tahoma;font-size: 12px; font-weight: bold" onclick =haiwa.style.height=" 120";document.all.haiwa.scrolltop = 0 >

< input type = checkbox style = height:15px; name = ck id = ck2 >< label for = ck2 > 第三項 </ label >

</ div >

< div style = "height:20px;cursor:default;font-family: tahoma;font-size: 12px; font-weight: bold" onclick =haiwa.style.height=" 120";document.all.haiwa.scrolltop = 0 >