Multiple select dropdown - generisanje vrednosit u listu

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Imam ovaj multiple selection dropdown:

<select name="" id="tagselect" class="selectpicker"  multiple data-selected-text-format="count">        <option value="">Filter by tags</option>        <option value="">Accepts Credit Cards</option>         <option value="">Parking Street </option>         <option value="">Wireless Internet </option>        <option value="">Food</option> </select>

I imam ovaj div koji je po defaultu hidden, dok ne odaberem neku vrednost u gornjem dropdownu.

<ul class="tags">   <li></li>   <li></li>   <li></li> </ul>

Ono sto zelim je da ako u select dropdownu izaberem na pr Accepts Credit Cards - da mi se automatski izgenerise sledece :

<ul class="tags">   <li>Accepts Credit Cards</li>   <li></li> </ul>

Ili ako izaberem vise opcija u select dropdownu ( na pr Accepts Credit Cards, Parking Street, Food) - da mi se izgenerise

<ul class="tags">   <li>Accepts Credit Cards</li>   <li>Parking Street</li>   <li>Food</li> </ul>

Btw: resenje ne mora da bude iskljucivo jquery, moze i ajax, php...

• 1Ovo se svidja korisniku: m4rk0
  
  Registruj se da bi pohvalio/la poruku!

A pure JS? Evo nešto na brzinu:
var select = document.getElementById('tagselect'); var tags = document.getElementById('tags'); select.addEventListener('change', function() {   while (tags.firstChild)      tags.removeChild(tags.firstChild);       for (var i = 0; i < select.options.length; i++) {      var option = select.options[i];      if (option.selected) {         var element = document.createElement('li');         element.innerText = option.text;         tags.appendChild(element);      }   } });

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Ne radi i baca mi ovu gresku:

Citat:Uncaught TypeError: Cannot read property 'firstChild' of null

• 1Ovo se svidja korisniku: m4rk0
  
  Registruj se da bi pohvalio/la poruku!

A, pa da, treba da dodaš id="tags" na ul sa klasom "tags".

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Ladno nisam video - hvala. Imam jos jedan slucaj

<ul id="tags">   <li><a href="#"> <i class="close-tag" aria-hidden="true"></i></a></li>   <li><a href="#"> <i class="close-tag" aria-hidden="true"></i></a></li>   <li><a href="#"> <i class="close-tag" aria-hidden="true"></i></a></li> </ul>

Znaci sve isto s tim sto unutar li taga ima a href i ovaj "close-tag".

Pa bi trebao da generise tipa

<ul id="tags">   <li><a href="#">Accepts Credit Cards <i class="close-tag" aria-hidden="true"></i></a></li>   <li><a href="#">Parking Street <i class="close-tag" aria-hidden="true"></i></a></li>   <li><a href="#">Food <i class="close-tag" aria-hidden="true"></i></a></li> </ul>

• 2Ovo se svidja korisnicima: m4rk0, Filodendron
  
  Registruj se da bi pohvalio/la poruku!

Evo: https://jsfiddle.net/yp2gwzo3/

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Bravo majstore. Jos treca i poslednja stvar, obecavam

Ne mogu da povezem da mi se klikom na #restaurant-listing #tags li a .close-tag "gasi" taj LI element i istovremeno deselektuje option (koji ga je generisao) iz #tagselect dropdown-a.

• 2Ovo se svidja korisnicima: Filodendron, m4rk0
  
  Registruj se da bi pohvalio/la poruku!

Mare, a sto lepo ne koristis chosen kao sva normalna deca?

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

@Rastafarii

Tnx, skroz sam zaboravio na njega. Jos po deafultu ima sve sto mi treba.