Question

        <tr>
            <td><label for="year">YEARS</label></td>
            <td>
                <select name="test" id="years" multiple="multiple" size="10">
                    <optgroup label="CHILD/TEEN">
                        <option value="zero">0</option>
                        <option value="one">10</option>
                    </optgroup>
                    <optgroup label="ADULT">
                        <option value="two" selected>20</option>
                        <option value="three">30</option>
                    </optgroup>
                    <optgroup label="ADULTADULT">
                        <option value="four">40</option>
                        <option value="five">50</option>
                        <option value="upsix">60</option>
                    </optgroup>
                </select>
            </td>
        </tr>

我试图选择多个。但是如果没有“控制”键，我就无法选择多个。

我必须使用optgroup :(

我如何解决这个问题？

Answer 1

您可以使用以下纯Javacript：

function init() {
  if (arguments.callee.done) return;
  arguments.callee.done = true;
  if (khtmltimer) clearInterval(khtmltimer);
  var s = document.getElementsByTagName('select');
  for (var i = 0; i < s.length; i++) {
    if (s[i].hasAttribute('multiple')) {
      s[i].onclick = updateSelect;
    }
  }
}
function updateSelect(e) {
  var opts = this.getElementsByTagName('option'), t, o;
  if (e) {
    e.preventDefault();
    t = e.target;
  }
  else if (window.event) {
    window.event.returnValue = false;
    t = window.event.srcElement;
  }
  else return;
  t = e.target || window.event.srcElement;
  if (t.getAttribute('class') == 'selected') t.removeAttribute('class');
  else t.setAttribute('class', 'selected');
  for (var i = 0, j = opts.length; i < j; i++) {
    if (opts[i].hasAttribute('class')) opts[i].selected = true;
    else opts[i].selected = false;
  }
}

if (document.addEventListener) document.addEventListener("DOMContentLoaded", init, false);
/*@cc_on @*/
/*@if (@_win32)
    document.write("<script id=__ie_onload defer src=javascript:void(0)><\\/script>");
    var script = document.getElementById('__ie_onload');
    script.onreadystatechange = function() {
        if (this.readyState == 'complete') {
            init();
        }
    };
/*@end @*/
if (/KHTML/i.test(navigator.userAgent)) {
    var khtmltimer = setInterval(function() {
        if (/loaded|complete/.test(document.readyState)) {
            init();
        }
    }, 10);
}
window.onload = init;

请参阅此已更新 fiddle

希望它可以帮到你

由于

Answer 2

对于可以一次选择mutliple选项的表单，您应该使用复选框，在本例中。他们不需要用户按住CTRL，并且每个人都会理解。

<fieldset>
  <legend>CHILD/TEEN</legend>
  <input id="child-0" type="checkbox" /><label for="child-0">0</label>
  <input id="child-10" type="checkbox" /><label for="child-10">10</label>
</fieldset>
<fieldset>
  <legend>ADULT</legend>
  <input id="adult-20" type="checkbox" /><label for="adult-20">20</label>
  <input id="adult-30" type="checkbox" /><label for="adult-30">20</label>
</fieldset>
<fieldset>
  <legend>ADULTADULT</legend>
  <input id="adult-40" type="checkbox" /><label for="adult-40">40</label>
  <input id="adult-50" type="checkbox" /><label for="adult-50">50</label>
  <input id="adult-60" type="checkbox" /><label for="adult-60">60</label>
</fieldset>

HTML optgroup多选而无需控制键

2 个答案: