Görseldeki gibi nasıl yapabilirim ?

Yapmak istediğimiz:



Yapamadığım

<select id="example-include-reset-divider" multiple="multiple">
    <option value="a" >Option 1</option>
    <option value="b">Option 2</option>
    <option value="c">Option 3</option>
    <option value="d">Option 4</option>
    <option value="e">Option 5</option>
    <option value="f">Option 6</option>
    <option value="g">Option 7</option>
    <option value="h">Option 8</option>
    <option value="i">Option 9</option>
    <option value="j">Option 10</option>
    <option value="k">Option 11</option>
    <option value="l">Option 12</option>
    <option value="m">Option 13</option>
    <option value="n">Option 14</option>
</select>

  $(document).ready(function() {
        $('#example-include-reset-divider').multiselect({
            includeResetOption: true,
            includeResetDivider: true
        });
    });

Kullanıyorum ancak görselleri ekleyemedim;






Bu şekilde bir kod buldum ancak çalıştıramadım. En basit nasıl oluşturabilirim arkadaşlar ? option'lara müdahale edemedim bir türlü..

Multiselect olacak birden fazla renk seçilecektir. Seleck yanınada ara diye buton ekleyeceğim.

Bi çay borcun olsun hocam

seçenekler li etiketi içerisinde oldugu için seçenekleri istediğiniz gibi modifiye edebilirsiniz.
https://codepen.io/elmahdim/pen/hlmri

Sadece

<option value="a" >Option 1</option>


Option 1 yazan yerin background'a img eklemek istiyorum hocam. Gönderdiğin baya düzenleme gerektiriyor

class atayarak background verebilirsiniz hocam.

<option style="color: red;" value="j">Kırmızı</option>

<select id="example-include-reset-divider" multiple="multiple">
  <option style="background-image:url(kiraz.png);background-color:white;">male</option>
  <option style="background-image:url(volkanik.png)background-color:white;;">female</option>
  <option style="background-image:url(tas.png);background-color:white;">others</option>
</select>

jquery multiselect eklentisi değiştirmiyorsa eğer, ustteki calısıyor olması gerek.
iyi çalışmalar.