javascript - Html 选择，选择限制

Question

我有多个选择 true 的下拉列表，现在我想将最大选择数限制为“3”。

我怎样才能做到这一点 ？

Answer 1

据我所知，HTML 中没有办法做到这一点，而且 JavaScript 中的检查可能非常复杂。

就个人而言，我只是在服务器端验证它。例如，在 PHP 中：

if( count($_POST['myselect']) > 3) die("You selected too many options");

编辑： JavaScript 解决方案：

// HTML: <select multiple data-max="3">
(function() {
    var tmp, qsa, l, i, handler, evt;
    if( document.body.attachEvent) {
        handler = "attachEvent";
        evt = "onclick";
    }
    else {
        handler = "addEventListener";
        evt = "click";
    }
    if( document.querySelectorAll) {
        qsa = document.querySelectorAll('select[multiple][data-max]');
    }
    else {
        tmp = document.getElementsByTagName('select');
        l = tmp.length;
        qsa = [];
        for( i=0; i<l; i++) {
            if( tmp[i].hasAttribute("multiple") && tmp[i].hasAttribute("data-max"))
                qsa.push(tmp[i]);
        }
    }
    l = qsa.length;
    for( i=0; i<l; i++) {
        qsa[i][handler](evt,function() {
            var opts, l, i, c, m;
            opts = this.options;
            l = opts.length;
            m = parseInt(this.getAttribute("data-max"),10);
            c = 0;
            for( i=0; i<l; i++) {
                if( opts[i].selected) c++;
                if( c > m) {
                    alert("You may only select up to "+m+" options.");
                    return false;
                }
            }
        });
    }
})();

我不能 100% 确定它会起作用，因为我还没有测试过它，但它让您了解 JavaScript 解决方案会有多烦人。

Answer 2

这里是带有 jquery 的基本 html 和 js

   <select name="x" id="mySelect" multiple="multiple" size="11">
        <option value="a">a</option>
        <option value="b">b</option>
        <option value="c">c</option>
        <option value="d">d</option>
        <option value="e">e</option>
        <option value="f">f</option>
        <option value="g">g</option>
        <option value="h">h</option>
        <option value="i">i</option>
        <option value="j">j</option>
        <option value="k">k</option>
    </select>

if($("#mySelect :selected").length>3){
  alert("Warning");
  return false; 
}