Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > Ограничить выбор в SELECTe

Автор: langolier 26.8.2008, 13:18

Есть такой селект

Код


  <select name="select" size="10" multiple="multiple" id="select">
    <option>Москва</option>
    <option>Питер</option>
    <option>Магадан</option>
    <option>Челябинск</option>
  </select>

Подскажите, как можно ограничить выбор, т.е. юзер сможет выбрать только 3 варианта?? smile

Автор: Ghirik 26.8.2008, 15:53

Это не такая простая задача, как может показаться на первый взгляд. Предусмотренных методов для её решения нет, а сочинять через... не хочется.

Автор: Michael.de 26.8.2008, 16:06

langolier, неполная информация - что должно произойти, если юзер кликнет на 4й вариант?

Ghirik, <select>...</select> можно DIVами имитировать smile

Автор: bars80080 26.8.2008, 16:26

а таком случае уж лучше накидать chekbox'ов и не мучаться

Автор: Ghirik 26.8.2008, 16:32

Цитата

Ghirik, <select>...</select> можно DIVами имитировать

Ну, дак там кода килограмм. smile

langolier, http://www.door-to.ru/AnimaJS/tool/animajs_instrument.htm, такое не подойдет?

Добавлено через 3 минуты и 22 секунды
Нет... langolier, не смотрите... smile

там не реально переделать под вашу задачу...

Автор: Hades 26.8.2008, 17:37

не знаю на сколько красиво получилось, но как вариант

Код


<div id="select"></div>
    
<script type="text/javascript">
    function createSelect(index) {
        var cities = new Array('Москва', 'Питер', 'Магадан', 'Челябинск');
            
        if (index > cities.length)
            index = cities.length;
                
        var options = '<select size="10" multiple="multiple" id="select">';
        for (var i = 0; i < index; ++i)
            options += '<option>' + cities[i] + '</option>';
                
        options += '</select>';
        document.getElementById('select').outerHTML = options;
    }
        
    createSelect(3);
</script>
    
<br />
<br />
<button onclick="createSelect(3);"> &nbsp;&nbsp;3&nbsp;&nbsp; </button>
<button onclick="createSelect(4);"> &nbsp;&nbsp;4&nbsp;&nbsp; </button>

Автор: langolier 26.8.2008, 19:47

хммм... что-то последний вариант я не понял совсем...

В общем как я представляю себе решение:
есть большой список, где-то 50 городов.. юзер может выбрать только три... три любых города...
выделение происходит с зажатой кнопкой ctrl
при попытке выделить чётвёртый ему показываем окошко "можно выбрать только 3 города"... либо вообще ничего не показывать, а не давать выделить этот 4-й город.
затея с чекбоксами не рулит smile

, многовато их получиться...

Автор: bars80080 26.8.2008, 19:59

Цитата(langolier @ 26.8.2008, 19:47

)

затея с чекбоксами не рулит , многовато их получиться

засунь в див с overflow-y:scroll , получишь тот же multiple select

Автор: langolier 26.8.2008, 20:24

а как ограничить выбор до 3-х чекбоксов?

Автор: bars80080 26.8.2008, 21:01

Код


<html><body>
<script>
function check1(x) {
    var div = document.getElementById('qw');
    var elm = div.getElementsByTagName('input');
    var elml = elm.length;
    for(i = 0, j = 0; i < elml; i++) {
        if(elm[i].checked) j++;
    }
    if(j > 3) { x.checked = false; alert('нельзя выбрать больше трёх городов'); }
}
</script>
<div id="qw" style="width: 50px; height: 200px; overflow-y: scroll;">
<input type="checkbox" name="box1" onclick="check1(this);" />1
<input type="checkbox" name="box2" onclick="check1(this);" />2
<input type="checkbox" name="box3" onclick="check1(this);" />3
<input type="checkbox" name="box4" onclick="check1(this);" />4
<input type="checkbox" name="box5" onclick="check1(this);" />5
<input type="checkbox" name="box6" onclick="check1(this);" />6
</div>
</body></html>

Автор: langolier 26.8.2008, 21:08

СПАСИБО, bars80080!!!!
Вопрос решён smile