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

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

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

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

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

      • Вот так:

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

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

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

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

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

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

          
          <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);
          
          • Спасибо!Это мало решило вопрос разных стилей для разных селектов. Но я придумал другой способ посмотрев пример с не заданной шириной:
            вместо

            
            .selectbox  .select {
            ...
            }
            

            Ставим

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

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

  3. Вася Пупкин
    8 лет 2 месяца назад

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

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

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

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

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

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

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

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

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

  11. Лавров Сергей
    8 лет 1 месяц назад

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

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

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

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

    
    <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(); то все отрабатывает как надо, но выглядит не красиво ))

    • Только что проверил – все работает. В вашем коде сразу 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. Огромное спасибо и за оперативность и за подсказку. На самом деле все работает, пробовал разные варианты и получилась “каша” в итоге поэтому и не работало.

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

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

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

  19. Дмитрий
    8 лет назад

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

  20. Дмитрий
    8 лет назад
    /* при клике на пункт списка */
    					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');
    					});

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