jQuery-плагин для стилизации селектов

jQuery-плагин для стилизации select’ов

Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Одна из самых неприятных (и я бы даже сказал ужасных) вещей в веб-разработке — это верстка html-форм. К сожалению, не существует единого ...

Комментарии (105)
  1. 1
    Антон

    Да , я про это, уже сам разобрался, посмотрел ваш пример со стилем nowidth и сделал див с классом, как мне надо. Теперь другой вопрос, все хорошо, select стал как надо, но он теперь не работает. У меня такой селект — «class=»styled» name=href onchange=»sel(this.value)»» , она подставляется в проигрыватель ссылку из option, ну и далее function sel(href){
    if(href==»») mus.innerHTML=»»; else бла бла бла , а теперь ничего не происходит :(

  2. 3
    Александр
    @

    привет! объясни пожалуйста как передается высота и ширина селекту (знаю она у тебя в css задается,но мне нужно убрать оттуда и передать с помощью функции .width)
    $(‘select.styled’).width(155).height(25); — не прокатывает

      • 5
        Александр
        @

        Вот так:

        $(‘span.select’).width(155).height(25);

        То есть добустим если сделать так

        $('span.select.sel-1').width(155).height(25);
        $('span.select.sel2').width(300).height(50);

        и присвоить селектам классы sel1 и sel2 я тем самым получу для разных классов разные размеры селекта?

        • 6

          Нет, не сработает.

          Правильно будет так:

          <div class="sel1"><select class="styled"><option>Селект 1</option></select></div>
          <div class="sel2"><select class="styled"><option>Селект 2</option></select></div>
          
          $('div.sel1 span.select').width(155).height(25);
          $('div.sel2 span.select').width(300).height(50);
          
          • 7
            Александр
            @

            Спасибо!Это мало решило вопрос разных стилей для разных селектов. Но я придумал другой способ посмотрев пример с не заданной шириной:
            вместо

            .selectbox .select {
            ...
            }
            

            Ставим

            .sel1 .selectbox .select {...}
            .sel2 .selectbox .select {...}
            

            Получаем раздельные стили.
            В общем спасибо за ответы, за толковый скрипт, и отдельное спасибо за детальное описание (а то скрипт напишут а как польз. хз ).

  3. 8
    Вася Пупкин

    А как сделать, чтоб при большом кол-ве элементов появлялся вертикальный скролл, а не выдавалось всё большим списком как например вот тут — http://img195.imageshack.us/i/screenshot20120812000.png/

    А нужно, чтоб получилось вот так — http://img713.imageshack.us/i/screenshot20120812001.png/

  4. 10

    Привет! Примеры красочные, тоже давненько писал на эту тему пост конечно не полномассштабный скрипт, но полезные моменты есть, еще раз спасибо за примеры

  5. 11
    Alex

    Хороший дроп получился.
    А что насчет развернутых select, те которые с size?
    Можно ли подсказку в этом направлении.

  6. 13
    Alex

    Никто не говорит про multiple?
    Множественный выбор немного другое свойство.
    Я про про боксовый селект.
    Скорее всего такой скрипт не решит такой задачи.

  7. 15
    Дмитрий
    @

    Спасибо, удобная штука. Не громоздкая и названия классов нормальные.

  8. 16

    Классная статья. Но только пока не могу определиться, где применять этот скрипт массово..

  9. 17
    Sheo

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

  10. 18
    zjMaster

    как быть если имеются связанные поля типа Страна-Регион-город, стиль только применяется к стране, как быть?

  11. 21
    Лавров Сергей

    Здравствуйте! Почитал комментарии и немного не понял как сделать разные селекты? Не могли бы Вы описать попобробнее? А лучше с примерами кода и какие изменения куда вносить?)

  12. 24
    Alex

    http://msdn.microsoft.com/en-us/library/windows/desktop/aa511484.aspx
    Вот красочный пример того что такое листбокс — список не выпадающий а развернутый.
    А multiple это свойство позволяющее выбирать сразу несколько пунктов в списке.
    В общем я так понимаю что плаг не поддерживает listbox.
    Может кто-то знает решение для listbox?

  13. 25
    Владимир

    Все замечательно, одна проблема не отрабатывает событие onchange привязанное к элементу. Как бы это реализовать?

  14. 27
    Владимир

    Смотрите есть список

    <div class="town">
     <select id="city">
     <option value="ekb">Екатеринбург</option>
     <option value="chel">Челябинск</option>
     </select>
     </div>
    

    и есть скрипт

    $(document).ready(function () {
     $(".town").selectbox();
    
     });
     $("select").change(function () {
    
     id = $('#city option:selected').val();
     if (id == 'ekb') {
     $('#ekb').show();
     $('#chel').hide();
     }
     else {
     $('#chel').show();
     $('#ekb').hide();
     }
     });
    

    При выборе города должен скрываться/показываться один из divов, но этого не происходит если подключен ваш плагин, если убрать $(«.town»).selectbox(); то все отрабатывает как надо, но выглядит не красиво ))

    • 28

      Только что проверил — все работает. В вашем коде сразу 2 ошибки. Правильно вот так:

      $(document).ready(function () {
       $("#city").selectbox();
      
      	$("select").change(function () {
      		id = $('#city option:selected').val();
      		if (id == 'ekb') {
      			$('#ekb').show();
      			$('#chel').hide();
      		}
      		else {
      			$('#chel').show();
      			$('#ekb').hide();
      		}
      	});
      });
      
  15. 29
    Владимир

    Огромное спасибо и за оперативность и за подсказку. На самом деле все работает, пробовал разные варианты и получилась «каша» в итоге поэтому и не работало.

  16. 31
    Евгений

    Селект просто прелесть, но есть и проблема. Отправляя ajax запрос, параметры формы плагином jquery.js получить не удается. То есть, значения методом: var login=$(«#login»).val()
    Может подскажете как их совместить?

  17. 38
    Андрей

    Привет! У меня возникла следующая ситуация:

    <li class="tour-selection-input-wrapper">
     <span class="label">Откуда:</span>
     <?php echo SearchController::actionGetDepartCities() ?>
     </li>
     <li class="tour-selection-input-wrapper">
     <span class="label">Куда:</span>
     <span id="countries"></span>
     </li>
    
    $(document).ready(function(){
     LoadCountries($("#departCities").val());
     
     $("#departCities").change(function(){
     var id = $(this).val();
     LoadCountries(id);
     });
    
     function LoadCountries(id){
     $.ajax({
     url: '<?php echo $this->createUrl('search/LoadCountries')?>',
     cache: false,
     data: 'depCity='+id,
     success: function(html){
     $("#countries").replaceWith(html);
     //$('select').trigger('refresh');
     //console.log($("#countries").val());
     $('select').selectbox();
     }
     });
     };
    })
    

    При таком подходе получается, что старый селект остаётся, а новый добавляется «не проинициализированным» надеюсь правильно выразился)
    В итоге дом после 1-го изменения #departCities выглядит так:

    <li class="tour-selection-input-wrapper">
     <span class="label">Куда:</span>
     <span class="selectbox" style="display: inline-block; position: relative; z-index: 2; "><div class="select" style="float:left;position:relative;z-index:7000"><div class="text">Индия</div><b class="trigger"><i class="arrow"></i></b></div><div class="dropdown" style="position: absolute; z-index: 9999; overflow-x: hidden; overflow-y: auto; list-style: none; height: auto; bottom: auto; top: 28px; display: none; "><ul><li class="" style="">Египет</li><li class="">Израиль</li><li class="selected sel">Индия</li><li>Италия</li><li>Китай</li><li>ОАЭ</li><li>Таиланд</li><li>Турция</li><li>Кипр</li><li>Греция</li></ul></div></span><select id="countries" name="to">
    <option value="40">Египет</option>
    ....
    <option value="35">Греция</option>
    </select>
     </li>

    Помогите, как обойти эту ситуацию,а то я не силён в JS?
    PS Извините что громоздко

  18. 40
    Андрей

    Согласен, не совсем понятно расписано. Попробую проще:
    1. Есть 2 селекта один создаеётся ещё в пхп, второго на странице на момент загрузки не существует (на его месте просто пустой span с таким же id).
    После того как вся страница загрузилась, запускается функция: LoadCountries($(«#departCities»).val()); , которая получает аяксом весь select и заменяет пустой спан на этот селект.
    После этого запускаю $(‘select’).selectbox();
    Первый селект оформляется нормально, а второй почему-то нет…

  19. 43
    Дмитрий
    @

    Замечательный скрипт но есть недоделки. Кое что подправил кое что не могу, потому как мало знаком с jquery.
    Надо исправить:
    когда выбираешь пункт option с checked — ом(уже выбранный) происходит событие onChenge. По моему это неправильно. В моем случае запускается реагирующая функция. Вот от этого я хотел бы избавится!

  20. 48
    Дмитрий
    @
    /* при клике на пункт списка */
    					li.filter(':not(.disabled)').click(function() {
    						if(optionSelected.text() != $(this).text()) {
    							optionSelected.text($(this).text());
    							$(this).addClass('selected sel').siblings().removeClass('selected sel');
    							divText.text($(this).text());
    							option.removeAttr('selected').eq($(this).index()).attr('selected', true);
    							select.change();
    						}
    						dropdown.hide();
    					});
    					dropdown.mouseout(function() {
    						dropdown.find('li.sel').addClass('selected');
    					});

    Вот так лучше!