partyzanx
@partyzanx

Как эмулировать select option?

Есть такой рабочий скрипт, но так как внутрь option нельзя вставить другие теги с разными css свойствами, то как эмулировать select option, чтобы при этом работал сам скрипт?

<p>
    <select class="select" name="example5">
      <option>Pick one!</option>
      <option value="yes">Yes!</option>
      <option value="no">No!</option>
    </select>
  </p>
  <div class="conditional" data-cond-option="example5" data-cond-value="yes">
    Works with selects!
  </div>


/* * * * * * * * * * * * * * * * * *
* Show/hide fields conditionally
* * * * * * * * * * * * * * * * * */
(function($) {
  $.fn.conditionize = function(options){ 
    
     var settings = $.extend({
        hideJS: true
    }, options );
    
    $.fn.showOrHide = function(listenTo, listenFor, $section) {
      if ($(listenTo).is('select, input[type=text]') && $(listenTo).val() == listenFor ) {
        $section.slideDown();
      }
      else if ($(listenTo + ":checked").val() == listenFor) {
        $section.slideDown();
      }
      else {
        $section.slideUp();
      }
    } 

    return this.each( function() {
      var listenTo = "[name=" + $(this).data('cond-option') + "]";
      var listenFor = $(this).data('cond-value');
      var $section = $(this);
  
      //Set up event listener
      $(listenTo).on('change', function() {
        $.fn.showOrHide(listenTo, listenFor, $section);
      });
      //If setting was chosen, hide everything first...
      if (settings.hideJS) {
        $(this).hide();
      }
      //Show based on current value on page load
      $.fn.showOrHide(listenTo, listenFor, $section);
    });
  }
}(jQuery));
  
 $('.conditional').conditionize();


Можно список сделать так
<div class="mdl-textfield mdl-js-textfield mdl-dropdown mdl-textfield--floating-label" style="">
  <input class="mdl-textfield__input mdl-dropdown_input" type="text" id="reasonOfAddresChange">
  <label class="mdl-textfield__label" for="reasonOfAddresChange">Adres değişikliği sebebini seçiniz.</label>
  <ul class="mdl-menu mdl-js-menu mdl-dropdown-menu" for="reasonOfAddresChange">
    <li class="mdl-menu__item">İş değişikliği nedeniyle taşınma</li>
    <li class="mdl-menu__item">Şehir dışına çıkma</li>
    <li class="mdl-menu__item">Ülke dışına taşınma</li>
  </ul>
</div>
  • Вопрос задан
  • 442 просмотра
Пригласить эксперта
Ответы на вопрос 3
politon
@politon
HTML5,CSS3,JS,PHP,SQL,API,canvas,animation...
label не пойдет?
Ответ написан
@maxsnw
nice select и ему подобные глянь
Ответ написан
Комментировать
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
Есть готовые решения, вот самое популярное:
https://select2.org/

Основная идея в том, что select скрыт, есть другая div структура, клик по элементам которой, меняют выбранную option, которая скрыта. Соответственно стандартная работа формы, но широчайшие возможности для стилизации.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы