2

Как ограничить колличество выбранных элементов в мульиселекте. Например:

<select multiple="multiple" name="region">
     <option value="1">Киев</option>
     <option value="2">Москва</option>
     <option value="3">Лондон</option>
     <option value="4">Париж</option>
     <option value="5">Рим</option>
     <option value="6">Мадрид</option>
</select>

Надо, чтоб можно было выбрать максимум 3 города. После выскакивало предупреждение, что все элементы выбраны.

4 ответа 4

2

Что-то вроде

<select multiple="multiple" name="region">
 <option value="1" onclick="myFunc(this)">Киев</option>
 <option value="2" onclick="myFunc(this)">Москва</option>
 <option value="3" onclick="myFunc(this)">Лондон</option>
 <option value="4" onclick="myFunc(this)">Париж</option>
 <option value="5" onclick="myFunc(this)">Рим</option>
 <option value="6" onclick="myFunc(this)">Мадрид</option>
</select>

Дальше JS:

function myFunc(elem){
    var region = document.getElementById('region');
    var countSelected = 0;
    //Считаем
    for (var i = 0; i < region.options.length; i++){
        if (region.options[i].selected)
            countSelected++;
    }
    if (countSelected > 3){//Отменяем последнее выделение
        elem.selected = false;
        alert('Больше выбирать нельзя');
    }
}
1
  • Спасибо помогло...
    – Oll
    27 сен 2011 в 14:38
1

Элементу select добавьте id:

<select multiple="multiple" name="region" id="region">

И сделайте проверку на JavaScript:

var count = 0;
var region = document.getElementById('region');
for (var i=0; i<region.options.length; i++){
    if (region.options[i].selected)
        count++;
}
alert('Выбрано городов: ' + count);
3
  • А как последний выделенный элемент отменить? 27 сен 2011 в 13:54
  • А где тут ограничение???? Посмотрел на то что 10 и пошёл дальше... смотреть на то что больше 10...
    – Oll
    27 сен 2011 в 13:55
  • 1
    Это способ подсчитать города. Вам осталось вежливо сообщить это пользователю.
    – Tolyandre
    27 сен 2011 в 13:59
0

Можно так:

$(function(){
        var select = $('#new-select');
        select.click(function(){
            var a = select.find('option:selected');
            if(a.length==3){ select.attr('disabled','disabled') }
        });
     });
0
<select multiple="multiple" maxlength="3">
     <option value="1">Киев</option>
     <option value="2">Москва</option>
     <option value="3">Лондон</option>
     <option value="4">Париж</option>
     <option value="5">Рим</option>
     <option value="6">Мадрид</option>
</select>
<script>
var s = document.getElementsByTagName('select'), i = 0;
while(s[i]){ // вешаем обработчик на options, лежащие внутри select с заданным maxlength
    if(!this.parentNode.getAttribute('maxlength'))
    var o = s[i].options, j = 0;
    while(o[j]){
        o[j].onclick = function(){
            if(this.selected)
                if(!restrictSelect(this.parentNode))
                    this.selected = false;
        };
        ++j;
    }
    ++i;
}

function restrictSelect(x){
    var max = x.getAttribute('maxlength');
    var o = x.options, n = 0, i = 0;
    while(o[i]){
        if(o[i].selected)
            if(++n > max)
                return false;
        ++i;
    }
    return true;
}
</script>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.