select多選 multiple的使用示例
更新時間:2014年06月16日 15:52:31 投稿:whsnow
使用multiple可以實(shí)現(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>
選中的項(xiàng)目:<input type="text" name="output">
<input id="lalla" type="button" onclick="showDiv(this.id)" value="選擇">
<br/>
</form>
<p>在您點(diǎn)擊 “選擇多個” 按鈕之前,請嘗試同時選取多個選項(xiàng)。在點(diǎn)擊 “選擇多個” 按鈕之后,請?jiān)僭囈淮巍?lt;/p>
</form>
</body>
</html>
相關(guān)文章
深入淺析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
這篇文章主要介紹了JavaScript字符串操作方法 slice、substr、substring及其IE兼容性 的相關(guān)資料,需要的朋友可以參考下2015-12-12[JS]實(shí)現(xiàn)動態(tài)增加框架!未完成
[JS]實(shí)現(xiàn)動態(tài)增加框架!未完成...2007-03-03JS實(shí)現(xiàn)向表格中動態(tài)添加行的方法
這篇文章主要介紹了JS實(shí)現(xiàn)向表格中動態(tài)添加行的方法,涉及javascript針對表格行的動態(tài)添加技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03JS實(shí)現(xiàn)的跨瀏覽器解析XML文件實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)的跨瀏覽器解析XML文件的方法,結(jié)合實(shí)例形式分析了javascript基于ActiveXObject操作xml文件的加載與解析相關(guān)技巧,需要的朋友可以參考下2016-06-06微信小程序使用webview打開pdf文檔以及顯示網(wǎng)頁內(nèi)容的方法步驟
在線查看PDF文件,已經(jīng)是很常見的需求了,下面這篇文章主要給大家介紹了關(guān)于微信小程序使用webview打開pdf文檔以及顯示網(wǎng)頁內(nèi)容的方法步驟,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07使用gulp搭建本地服務(wù)器并實(shí)現(xiàn)模擬ajax
這篇文章主要給大家介紹了如何使用gulp搭建本地服務(wù)器并實(shí)現(xiàn)模擬ajax的相關(guān)資料,文中介紹的非常詳細(xì),相信對大家具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起看看吧。2017-04-04