select標籤multiple屬性的使用方法，select標籤multiple
前些日子公司讓做一個功能模組，對於裡面一個小功能費了些周折，現將其總結一下：
一、實現效果：
一、實現代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>select標籤multiple屬性的使用方法</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><script type="text/javascript">/** * @param fromSelectId option移動起始select標籤id * @param toSelectId option移動目的地select標籤id * @param addOrNot boolean類型——true表示當前進行的是添加操作，否則是刪除操作 * @param moveAllOrNot boolean類型——true表示當前進行的是“全部”操作，否則當前進行的不是“全部”操作 */function moveOptions(fromSelectId, toSelectId, addOrNot, moveAllOrNot){var fromObject = document.getElementById(fromSelectId);var toObject = document.getElementById(toSelectId);if(fromObject.options.length == 0){if(addOrNot){alert("沒有找到可添加的選項！");}else{alert("沒有找到可刪除的選項！");}return;}if(fromObject.selectedIndex == -1 && moveAllOrNot == false){if(addOrNot){alert("請先選擇要添加的選項！");}else{alert("請先選擇要刪除的選項！");}return;}var toSelectOptionsList = new Array(toObject.options.length);//存放option移動目的地select標籤所有option選項var toSelectOptionPointer = 0;for(; toSelectOptionPointer < toObject.options.length; toSelectOptionPointer ++){//將option移動目的地原有option選項存放到toSelectOptionsList數組中if(toObject.options[toSelectOptionPointer] != null){toSelectOptionsList[toSelectOptionPointer] = new Option(toObject.options[toSelectOptionPointer].text, toObject.options[toSelectOptionPointer].value);}}for(var i = 0; i < fromObject.options.length; i ++){if(fromObject.options[i] != null && (fromObject.options[i].selected == true || moveAllOrNot)){//將新添加的option選項存放到toSelectOptionsList數組中toSelectOptionsList[toSelectOptionPointer] = new Option(fromObject.options[i].text, fromObject.options[i].value);toSelectOptionPointer ++;}}for(var i = 0; i < toSelectOptionsList.length; i ++){//重新整合option移動目的地select標籤的option選項，以使新添加的顯示出來if(toSelectOptionsList[ i ] != null){toObject.options[ i ] = toSelectOptionsList[ i ];}}for(var i = fromObject.options.length - 1; i >= 0; i --){//重新整合option移動起始select標籤的option選項，以便去掉刪除的option選項if(fromObject.options[i] != null && (fromObject.options[i].selected == true || moveAllOrNot)){fromObject.options[i] = null;}}}function getSelectedValues(){var selectedValues = "";var rightSelectObject = document.getElementById("rightSelect");for(var i=0; i<rightSelectObject.options.length; i++){selectedValues = rightSelectObject.options[i].value + ',' + selectedValues;}selectedValues = selectedValues.substring(0, selectedValues.lastIndexOf(','));if(selectedValues == ""){alert("你沒有選擇任何選項！！！");}else{alert("你選中的值為：" + selectedValues);}}</script></head><body><center style="margin-top:12%"><font color="red" size="5"><b>select標籤multiple屬性的使用方法</b></font></center><br/><table border="1" cellspacing="0" align="center"><tr><td align="center" width="150px">未選擇</td><td align="center" width="150px">操作</td><td align="center" width="150px">已選擇</td></tr><tr><td align="center" width="150px"><select id="leftSelect" name="leftSelect" multiple="multiple" size="15" style="width:100%; height:100%;"><option value="07c9907f-bfb1-4e37-98e6-02224834ef76">荸薺</option><option value="4e1c083f-c988-48b9-9a48-ff7dbe07e51f">胡桃</option><option value="0e685a36-ddd1-4288-b741-8624e4384b58">楊梅</option><option value="0fc09295-ed4d-4e79-9c11-2f0913b421a6">沙棗</option><option value="1cb5eccc-faa3-44df-ba62-bb5fcdf29036">臍橙</option><option value="26e545ae-3647-45aa-8b9f-cef6a8d8c454">芒果</option><option value="2788bd4d-53c2-4571-a562-b8c47e058ff4">枇杷</option><option value="2ab7393a-7478-4451-bb63-e8a91dc63adb">金桔</option><option value="51160f28-44ab-419d-948c-16ba1370613a">青梅</option><option value="baa4df9c-e6f9-4d4d-bfb8-648394942170">毛桃</option><option value="1854fd23-7da0-4d3f-bf4b-21ed97037a0f">金桔</option><option value="43a0912c-ba1b-4700-8616-31f701098b0a">酸橙</option><option value="37a76cf1-0b11-411a-8ce3-bb37383951c4">海棠</option><option value="78a49dc8-3920-47ff-9a3e-b6e31d337d67">檳榔</option><option value="26852cb9-3cde-4b50-bf52-0ad838822665">楊桃</option><option value="a52b4681-2c1b-4520-ab8a-6507b52c2105">櫻桃</option><option value="8d3d65f7-5252-4f47-9c9a-960367b06ba7">芭樂</option><option value="7b361600-7c77-44a5-8e03-c043ebddc710">鱷梨</option><option value="5c2f062b-3fd2-44c1-a8e2-0546454978d9">西柚</option></select></td><td align="center" width="150px"><input type="button" onclick="moveOptions('leftSelect', 'rightSelect', true, false);" value="添加 >>" style="text-align:center; margin-bottom:10px; width:90px;"/><br/><input type="button" onclick="moveOptions('rightSelect', 'leftSelect', false, false);" value="刪除 <<" style="text-align:center; margin-bottom:10px; width:90px;"/><br/><input type="button" onclick="moveOptions('leftSelect', 'rightSelect', true, true);" value="全部添加 >>" style="margin-bottom:10px; width:90px;"/><br/><input type="button" onclick="moveOptions('rightSelect', 'leftSelect', false, true);" value="全部刪除 <<" style="margin-bottom:10px; width:90px;"/><br/></td><td align="center" width="150px"><select id="rightSelect" name="rightSelect" multiple="multiple" size="15" style="width:100%; height:100%;"></select></td></tr></table><br/><center><input type="button" value="擷取選項的value值" onclick="getSelectedValues();"/></center></body></html>
【0分下載資源】
<select id="" multiple="multiple" size="5" name="">
<option value="1" selected>a</option>
<option value="2" selected>b</option>
<option value="3">c</option>
<option value="4">d</option>
</select>
加上selected 就行了
javascript怎獲得select標籤是否有multiple(複選)屬性，用js或jq都行
select的複選很少見，不過也碰到過。
用js:(加入你的select的id為"se")
if(document.getElementById("se").hasOwnProperty(“multiple”)){
alert("複選")
}else{
alert("單選")
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
