Блог

Главная - Вопросы по программированию - Пользовательский JS / CSS выбирает альтернативу без jquery

Пользовательский JS / CSS выбирает альтернативу без jquery

#javascript #jquery #html #css #select

#javascript #jquery #HTML #css #выберите

Вопрос:

Я пытаюсь создать пользовательский выбор, подобный этому, но без jquery (я просто не хочу импортировать целую новую библиотеку для одной единственной вещи). Я делал это до этого, но я не знаю, как я могу сделать выбор с помощью обычного JS. Как я могу выбрать что-то из списка?

Комментарии:

1. Определите выбор . что должно произойти при выборе ..?

2. Что ж, послушайте #options щелчок. Определите, какая опция была выбрана, и обработайте ее html как значение.

3. Я не понимаю, почему вы хотите это изменить. Похоже на vanila select, но новая функция не добавлена (фильтр по тексту)

Ответ №1:

Если вы просто хотите показать выбранный элемент в выпадающем списке,

Вам нужно обернуть текст, который будет отображаться внутри <span> , следующим образом

 <div class="label"><span>Select Element</span><b class="button">▾</b>
</div>

Затем вы можете изменить его innterHTML для отображения выбранного элемента, используя следующий js:

 var dd = document.querySelector('.label span');
var options = document.querySelectorAll('div.hidden ul li');
for (var i = 0; i < options.length; i  ) {
    options[i].onclick = select;
}

function show() {
 var selectbox = document.getElementById("options");
 if (selectbox.className == "hidden") {
   selectbox.setAttribute("class", "visible");
 } else {
        selectbox.setAttribute("class", "hidden");
 }
}

function select() {
 dd.innerHTML = this.innerHTML;
}

ДЕМОНСТРАЦИЯ

Ответ №2:

Прослушайте щелчки на вашем div#options . ДЕМОНСТРАЦИЯ

 function choose(ev, el) {
    var options = el, target = ev.target,
        value = ev.target.innerHTML;

    options.setAttribute('class', 'hidden');
    options.parentElement.querySelector('.label').innerHTML = value;
}

<div id="options" class="hidden" onclick='choose (event, this);'>

Дополнительные примечания. Я не рекомендую использовать встроенные обработчики. Используйте addEventListener вместо этого.

Ответ №3:

Вам необходимо определить обработчик onclick для ваших li элементов. Либо в HTML, либо в JS путем перебора дочерних элементов div контейнера с li элементами http://jsfiddle.net/rWU5t/2

Если вы хотите, чтобы при наведении курсора мыши выделялись необычные элементы, вам также необходимо определить обработчики onmouseover и onmouseout .