select多选问题

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

<select multiple name="SUBROUTE" style="HEIGHT: 140px; WIDTH: 150px" id="subroute_select">
<option VALUE="10M">10M</option>
<option VALUE="30M">30M</option>
<option VALUE="50M">50M</option>
<option VALUE="100M">100M</option>
<option VALUE="200M">200M</option>
<option VALUE="300M">300M</option>
<option VALUE="500M">500M</option>
<option VALUE="1000M">1000M</option>
</select>

但是會有一個問題：如果想選擇多個選項，就必須用按 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 >

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

           </ div >

       </ div >

     </ body >

</ html >