select多選 multiple的使用示例
更新時間：2014年06月16日 15:52:31 投稿：whsnow
使用multiple可以實現(xiàn)select多選，本例將為大家介紹下select多選 multiple的使用，新手朋友們可以學(xué)習(xí)下
復(fù)制代碼 代碼如下:
<html>
<head>
<script type="text/javascript">
function showDiv(id){
document.getElementById("selectOption").style.display="block";
document.getElementById("selectOption").style.position="absolute";
document.getElementById("selectOption").style.top=document.getElementById(id).offsetTop+25;
document.getElementById("selectOption").style.left=document.getElementById(id).offsetLeft+20;
}
function selectM()
{
var obj = document.getElementById("mySelect");
alert(obj.selectedIndex);
}
function checkselect(objname){
o = document.getElementById(objname);
t = document.getElementById("output");
var intvalue="";
for(i=0;i<o.length;i++){
if(o.options[i].selected){
intvalue+=o.options[i].value+",";
}
}
t.value=intvalue.substr(0,intvalue.length-1);
alert(intvalue);
}
</script>
</head>
<body>
<form>
<div id="selectOption" style='width:100px;height:50px;z-index:100;border:1px solid #0099FF;background:#cccccc;display:none;'>
<select id="mySelect" multiple="multiple" size="4">
<option value='蘋果'>蘋果</option>
<option value='桃子'>桃子</option>
<option value='香蕉'>香蕉</option>
<option value='桔子'>桔子</option>
</select>
<input type="button" onclick="checkselect('mySelect')" value="checkselect">
</div>
選中的項目：<input type="text" name="output">
<input id="lalla" type="button" onclick="showDiv(this.id)" value="選擇">
<br/>
</form>
<p>在您點擊 “選擇多個” 按鈕之前，請嘗試同時選取多個選項。在點擊 “選擇多個” 按鈕之后，請再試一次。</p>
</form>
</body>
</html>
相關(guān)文章
文件上傳,iframe跨域數(shù)據(jù)提交的實現(xiàn)
下面小編就為大家?guī)硪黄募蟼?iframe跨域數(shù)據(jù)提交的實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)移動端橫豎屏檢測，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
學(xué)習(xí)使用bootstrap的modal和carousel
這篇文章主要教大家學(xué)會用bootstrap的modal和carousel,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
Javascript動態(tài)創(chuàng)建表格及刪除行列的方法
這篇文章主要介紹了Javascript動態(tài)創(chuàng)建表格及刪除行列的方法,涉及javascript動態(tài)操作表格的相關(guān)技巧,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了JS中的函數(shù)與對象的創(chuàng)建方式，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
本篇文章主要介紹了用函數(shù)式編程對JavaScript進行斷舍離，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
廣告代碼靜態(tài)化js通用函數(shù)...2007-05-05
本文為大家介紹下jsPDF生成pdf后如何在網(wǎng)頁展示，下面有個不錯示例，大家可以參考下2014-01-01
之前當(dāng)vue更新到2.0之后，作者就宣告不再對vue-resource更新，而是推薦的axios,前一段時間用了一下，現(xiàn)在說一下它的基本用法。文中介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。2017-03-03
第一次動手實現(xiàn)bootstrap table分頁效果
這篇文章主要為大家詳細(xì)介紹了第一次動手實現(xiàn)bootstrap table分頁效果的相關(guān)代碼,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09