HTML多選擇限制

是否可以設置限制爲多選？HTML多選擇限制

下面是一個示例代碼，其中用戶可以選擇多個值。

<select multiple="multiple" name="choose"> 
<option value="1">Value 1</option> 
<option value="2">Value 2</option> 
<option value="3">Value 3</option> 
<option value="4">Value 4</option> 
<option value="5">Value 5</option> 
<option value="6">Value 6</option> 
</select>

但是，如何限制用戶選擇不超過3個值。有什麼想法？

來源

2010-11-09 Hafizul Amri

謝謝大家，我明白了。 – 2010-11-09 15:47:24

[Multiple Select limit of number of selection]（可選重複次數限制）（http://stackoverflow.com/questions/30474614/multiple-select-limit-number-of-selection） – Stranger 2016-12-07 14:07:37

您可以使用jQuery

$("select").change(function() { 
     if($("select option:selected").length > 3) { 
      //your code here 
     } 
    });

來源

2010-11-09 15:22:02 infinity

我看不到有人在這裏要求提供jQuery解決方案...... – chitzui 2017-07-01 16:37:19

你會通過在客戶端的JavaScript做到這一點，然後在服務器端添加一個檢查，以防客戶端禁用JavaScript。

下面是一些基本的客戶端代碼給你一個想法：

<html> 
    <body> 
     <form onsubmit="validate()"> 
      <select multiple="multiple" id="choose" name="choose"> 
       <option value="1">Value 1</option> 
       <option value="2">Value 2</option> 
       <option value="3">Value 3</option> 
       <option value="4">Value 4</option> 
       <option value="5">Value 5</option> 
       <option value="6">Value 6</option> 
      </select><br> 
      <input type="submit"> 
     </form> 
     <script> 
     function validate() 
     { 
      var selectChoose = document.getElementById('choose'); 
      var maxOptions = 2; 
      var optionCount = 0; 
      for (var i = 0; i < selectChoose.length; i++) { 
       if (selectChoose[i].selected) { 
        optionCount++; 
        if (optionCount > maxOptions) { 
         alert("validation failed, not submitting") 
         return false; 
        } 
       } 
      } 
      return true; 
     } 
     </script> 
    </body> 
</html>

來源

2010-11-09 15:15:28 RedFilter

RedFilter與由JavaScript驗證正確的想法。沒有測試過，但你可以這樣做：

var options = document.all.tags("option");<br> 
var selectedCounter = 0; 

for (var i=0; i < options.length; i++) { 
    if (options[i].selected) { 
     selectedCounter++; 
    } 
    checkCounter(); 
} 

function checkCounter() { 
    //disable all options 
}

來源

2010-11-09 15:36:37 08Hawkeye

腳本，將不允許超過3個元素被選中（而不是僅僅驗證它在提交時）。

http://jsfiddle.net/v33sszgp/

var verified = []; 
document.querySelector('select').onchange = function(e) { 
    if (this.querySelectorAll('option:checked').length <= 3) { 
     verified = Array.apply(null, this.querySelectorAll('option:checked')); 
    } else { 
    Array.apply(null, this.querySelectorAll('option')).forEach(function(e) { 
     e.selected = verified.indexOf(e) > -1; 
    }); 
    } 
}

注有相關的防止實際上的select所選項目一些額外的複雜性和它，而驗證用戶的行爲，並恢復它，如果它是無效的。

來源

2015-10-16 00:20:03 arcyqwerty

HTML多選擇限制

回答

相關問題