javascript - Html 選択、選択制限

Question

複数選択 true のドロップダウン リストがあります。今度は、selection の最大数を '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; 
}