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

Question

[partyzanx]

Есть такой рабочий скрипт, но так как внутрь 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>

Comments

[Дмитрий]

Кто оценил этот вопрос, как "сложный"?))

Answer 1

[Олег]

label не пойдет?

Comments

[partyzanx]

может пойдёт, но надо чтобы список выпадал и чтобы при выборе одного из <li> скрипт работал)

Answer 2

[maxsnw]

nice select и ему подобные глянь

Answer 3

[Максим Тимофеев]

Есть готовые решения, вот самое популярное:
https://select2.org/

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