Html選擇，選擇限制

我有多個選擇真正的下拉列表，現在我想限制最多沒有「3」。Html選擇，選擇限制

我該怎麼做？

來源

2012-10-03 Shumaila Khan

使用，如果你想阻止它提交表單前JS，否則，你可以在模型中添加驗證規則。 –

http://stackoverflow.com/questions/9581198/jquery-limit-dropdown-check-list-selects – SuVeRa

首先dropDown列表可以選擇不止一次，Select（多個）標籤可以這樣做，Nothing to用YII（即使在服務器端），去編輯它 – Elbek

據我所知，在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解決方案有多惱人。

來源

2012-10-05 00:35:35

這裏HS基本的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; 
}

來源

2012-10-05 00:42:12 Elbek

Html選擇，選擇限制

回答

相關問題