Create a multiselect in pure HTML CSS and JS
I want to create a multiselect I looked in HTML Reference and added the multiselect attribute but that requires the user to press ctrl which is not good UX. I have seen some codepen craeting the desired selectbox but either they are too comples or using JQuerry. Could you please suggest a simple pure HTML,CSS,JS solution if that exists?
Need to build this
https://codepen.io/etienne582/pen/xxOgwzX
2 Replies
I dont know anything about JQuerry could you help me port to vanilla JS if a simple solution dosent exist?
it looks like relatively straightforward jquery in the codepen
* Anytime you see
$("selector"), you can replace that with document.querySelector("selector")
* .append() turns into .appendChild()
* $("<html tag>") is document.createElement("html tag")
* .val('test') is .value = 'test';
* .text('text here') is .innerText = 'text here';
The issue is that there's a whole bunch of logic hidden behind that first line,
is setting up a lot of "magic" behind the scenes, replacing the <select> with other elements. There's a couple dozen files in the select2 library, I don't think porting them is practical
There are non-jquery multiselect libraries on npm, this seems one of the most popular: https://slimselectjs.com/
Alternatively, I'd suggest taking a look at what Select2 is doing with the DOM in your specific use case, and then rewriting that from scratch without really looking at the Select2 source. At the end of the day, all it's doing is using click listeners on list items, copying items to new lists, and applying some styling. That's going to be a good chunk of devtime though