HTML Multiselect Limit - PullRequest
Новая
       29

HTML Multiselect Limit

14 голосов
/ 09 ноября 2010

Можно ли установить ограничение на множественный выбор?

Ниже приведен пример кода, где пользователь может выбрать более 1 значения. 

<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-х значений.Есть идеи?

Ответы [ 4 ]

15 голосов
/ 09 ноября 2010

Вы можете использовать jQuery 

  $("select").change(function () {
      if($("select option:selected").length > 3) {
          //your code here
      }
  });
6 голосов
/ 09 ноября 2010

Это можно сделать с помощью 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>
2 голосов
/ 16 октября 2015

Скрипт, запрещающий выбор более 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, и что он скорее проверяет действия пользователя и отменяет его, если он недействителен.

0 голосов
/ 09 ноября 2010

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