Как сделать выпадающее меню с checkbox?

Question

[Richard Millie]

Помогите создать выпадающее меню с checkbox только на чистом html/css. Заранее спасибо.
Мои наработки:

<select>
            <option>Select</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
          </select>

Comments

[Ankhena]

Что вы уже сделали и в чем возникла сложность?

[Richard Millie]

Сделал пока вот это:

<select>
            <option value="0" @click=" changeItem(item,0)">Select</option>
            <option value="1" @click=" changeItem(item,1)">1</option>
            <option value="2" @click=" changeItem(item,2)">2</option>
            <option value="3" @click=" changeItem(item,3)">3</option>
          </select>

Возникли сложности с добавлением чекбоксов.

[Ankhena]

Richard Millie,
либо плагин
https://select2.org/getting-started/basic-usage
https://joshuajohnson.co.uk/Choices/
либо кастомизируйте самостоятельно
www.webmasters.by/articles/html-coding/2458-custom...

В нативный option чекбоксы не встанут.

[origami1024]

Richard Millie, Я тебе вчера скидывал вылизанное решение на vuetify, не подошло в итоге?

На чистом html/css/js - вот погуглил за тебя, первое решение отсюда - самый простой вариант.
https://stackoverflow.com/questions/17714705/how-t...

[Richard Millie]

origami1024, то решение на vuetify очень хорошее, но я в упор не пойму как в v-select добавить какое-то событие.. Например мне нужно сделать @click=" changeItem(item,2)" ,если я выбираю 2 пункт.

[origami1024]

Richard Millie,
на v-select можно повесить @change
@change="alert"
Он срабатывает при селекте чего-то и параметром выдает все выделены итемы массивом

methods: {
  alert: e=>{
    alert(e)
  }
}

Answer 1

[Сергей c0re]