作者left (881 forever)
看板Ajax
标题[问题] 有关下拉式选单的问题
时间Fri Dec 26 13:17:10 2014
各位大大好
小弟目前遇到一个问题
就是下拉式选单"多选"但"无法下拉"的问题,
目前在网路上找到一段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://webptt.com/cn.aspx?n=bbs/Ajax/M.1419571039.A.E32.html
1F：推 swijo: 在触发事件时将select.size设成option的数量 12/27 02:40
2F：→ swijo: 新增else项将select.size设回1 12/27 02:41