При стилизации 2х select в каждом выводятся сразу два первых option?

Question

[Mesuti]

Привет!
Есть стилизованные select
Но если делать сразу 2, то в обоих выводится по два первых option.

Как сделать один?

Answer 1

[0xD34F]

Давайте не будем копипастить, а сделаем нормальный плагин:

$.fn.customSelect = function() {
  return this.each(function() {
    const $this = $(this).hide();
    const $wrapper = $this.wrap('<div class="select_wrapper"></div>').parent();

    $wrapper.append(`
      <span>${$this.find(':selected').text()}</span>
      <ul class="select_inner">${$this.children().get().map(n => `
        <li data-value="${n.value}">${n.innerText}</li>`).join('')}
      </ul>
    `);
    $wrapper.on('click', 'li', function() {
      $wrapper.children('span').text(this.innerText);
      $this.val(this.dataset.value).trigger('change');
    });
    $wrapper.on('click', function() {
      $('ul', this).slideToggle('fast');
    });
  });
};


$('#materialColor, #kantcolor').customSelect().change(function() {
  console.log(`#${this.id}: "${this.value}"`);
});

Comments

[Mesuti]

Спасибо Вам большое.
Который раз подсказываете.
Очень большой вклад внесли в мой обучение. =)

[Mesuti]

гениальнейший человек