→ iamnodoubt: 原本tag沒支援的效果,硬要弄通常都要花比較大的力氣 12/26 23:24
→ iamnodoubt: 不然就是用其他tag,用模擬的方式,但是select怎麼做還 12/26 23:25
→ iamnodoubt: 是很醜,還不如用checkbox的方式,像這個 12/26 23:25
各位大大好
小弟目前遇到一個問題
就是下拉式選單"多選"但"無法下拉"的問題,
目前在網路上找到一段sample code http://jsfiddle.net/51p7ocLw/
它可以不用按著crtl(command on mac)就可以直接多選
但是,他沒有下拉式的感覺阿,
我想做到的效果是
就是像單選那樣會有一個下拉式選單
然後我可以不急不徐的在這下拉式選單裡多選
我試著把size設成1,也不行
大家有其他的方式嗎?
程式片段如下:
<html>
<head>
<script type="text/javascript">
window.onmousedown = function (e) {
var el = e.target;
if (el.tagName.toLowerCase() == 'option' && el.parentNode.hasAttribute('multiple')) {
e.preventDefault();
// toggle selection
if (el.hasAttribute('selected')) el.removeAttribute('selected');
else el.setAttribute('selected', '');
// hack to correct buggy behavior
var select = el.parentNode.cloneNode(true);
el.parentNode.parentNode.replaceChild(select, el.parentNode);
}
}
</script>
</head>
<body>
<h4>From</h4>
<div>
<select name="sites-list" size="7" multiple>
<option value="site-1">SITE</option>
<option value="site-2" selected>SITE</option>
<option value="site-3">SITE</option>
<option value="site-4">SITE</option>
<option value="site-5">SITE</option>
<option value="site-6" selected>SITE</option>
<option value="site-7">SITE</option>
<option value="site-8">SITE</option>
<option value="site-9">SITE</option>
</select>
</div>
</body>
</html>
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 140.112.29.187
※ 文章網址: http://www.ptt.cc/bbs/Web_Design/M.1419571365.A.B36.html