[英]HTML multi-select box without Ctrl-click requirement
(Before writing this off as a duplicate of the various other questions of this nature, or as having been answered before, please read carefully.) (在将其写为此类性质的各种其他问题的副本之前,或者之前已经回答过,请仔细阅读。)
I'd like to make my HTML5 multiple select options so they never require Ctrl to be held down to select/deselect them without affecting other options.我想让我的 HTML5 多选选项,所以他们永远不需要按住 Ctrl 来选择/取消选择它们而不影响其他选项。 (This is for a Perl web application which I've been working on for years, and I've recently been asked to make the multiple select boxes less accident prone, ie users (some of whom are quite old) losing all other selected options when they click one, possibly without noticing.) (这是针对我多年来一直在研究的 Perl Web 应用程序,最近我被要求使多个选择框不易发生意外,即用户(其中一些人已经很老)丢失所有其他选定的选项当他们点击一个时,可能没有注意到。)
After spending hours testing various solutions I found on the web for this, I haven't found any which do what I'd like, ie:在花了几个小时测试了我在网上找到的各种解决方案之后,我还没有找到任何可以做我想做的事情,即:
<option>
s (which might be pre-selected when the page loads) should not be selectable/unselectable by clicking them (or by clicking any other options).任何禁用的<option>
s(可能在页面加载时预先选择)不应通过单击它们(或通过单击任何其他选项)来选择/不可选择。One of the solutions I've been looking at is How to avoid the need for ctrl-click in a multi-select box using Javascript?我一直在寻找的解决方案之一是如何避免使用 Javascript 在多选框中按 ctrl-click 的需要? (among the others on that page) and it's Fiddle ( http://jsfiddle.net/xQqbR/1022 ). (以及该页面上的其他人),它是 Fiddle( http://jsfiddle.net/xQqbR/1022 )。 It's a good start, but doesn't cater for my requirements 1, 3 & 6. I see that various commenters have indicted that (and how) jQuery shouldn't be required for it, but after trying what they suggested I couldn't get it to work, and I hardly know any JavaScript to solve this myself.这是一个好的开始,但不能满足我的要求 1、3 和 6。我看到各种评论者都指出(以及如何)不应该需要 jQuery,但是在尝试了他们的建议之后我不能让它工作,我几乎不知道任何 JavaScript 来解决这个问题。
Here's the kind of markup I'm dealing with:这是我正在处理的标记类型:
<select multiple size=3>
<option>Option 1</option>
<option>Option 2</option>
<option disabled>Option 3 (disabled)</option>
<option>Option 4</option>
<option>Option 5</option>
<option>Option 6</option>
<option selected>Option 7 (selected)</option>
<option disabled selected>Option 8 (disabled+selected)</option>
</select>
Thanks in advance for your time and expertise.提前感谢您的时间和专业知识。
var expanded = false; function showCheckboxes() { var checkboxes = document.getElementById("checkboxes"); if (!expanded) { checkboxes.style.display = "block"; expanded = true; } else { checkboxes.style.display = "none"; expanded = false; } }
#select22 { border-radius: 4px; width: 100%; height: 30px; color: white; padding-bottom: 2px; background-color: #00ced1; border: 1px solid #00ced1; border-bottom: 0.5px solid white; /* Here's the code we need */ -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; } .select-wrapper22:after { font-family: FontAwesome; content: '\\f107'; font-size: 20px; position: absolute; top: 6px; right: 4px; color: white; pointer-events: none; } .select-wrapper22:after:hover{ font-family: FontAwesome; content: '\\f107'; font-size: 20px; position: absolute; top: 6px; right: 4px; color: #00ced1; pointer-events: none; } .overSelect { position: absolute; left: 0; right: 0; top: 0; bottom: 0; } #checkboxes { display: none; border: 1px #7e7e7e solid; background-color: white; padding-top: 10px; } #checkboxes label::before { display: block; font-family: Aller Light; background-color: white; color: #7e7e7e; } #checkboxes label::after { display: block; font-family: Aller Light; background-color: white; color: aqua; } #checkboxes label:hover { color: #00ced1; } #checkboxes label::after { color: #00ced1; } .cotner { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 15px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .cotner input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .chmk { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: white; } .chmk:after { content: ""; position: absolute; display: none; } .cotner input:checked ~ .chmk:after { display: block; color: aqua; } .cotner .chmk:after { left: 9px; top: 2px; width: 5px; height: 10px; border: solid #00ced1; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } input[type=checkbox]:checked + label { color: red }
<div> <p class="sideheadingdrop">Hard Skills<i style="" class="fa fa-exclamation-circle"></i></p> <div class="select-wrapper22" onclick="showCheckboxes()"> <select id="select22" > <option value="" disabled selected hidden></option> </select> <div class="overSelect"></div> </div> <div id="checkboxes"> <label for="one" class="cotner"> <input type="checkbox" id="one" /> <span class="chmk"></span>First checkbox</label> <label for="two" class="cotner"> <input type="checkbox" id="two" /> <span class="chmk"></span>Second checkbox</label> <label for="three" class="cotner"> <input type="checkbox" id="three" /> <span class="chmk"></span>Third checkbox</label> </div> </div>
I have created multi checkbox without use of ctrl.我在不使用 ctrl 的情况下创建了多个复选框。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.