Question

我有多个选择的下拉列表为true，现在我想将seelction的最大数量限制为'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

这里是基本的html和js与jquery

   <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; 
}

Html选择，选择限制

2 个答案: