I want to insert <img> tag in each <option>, since option tag doesn't accept tags inside it, I want make select box using ul and li with cancel icon inside each option on right side.

Here is my jsfiddle so far

    $('.select ul li.option').click(function() {
    		 $(this).siblings().children().remove();
       var a= $(this).siblings().toggle();
    console.log( $(a).is(":visible"));
      	 $(this).siblings().append('<img src=".png" style="float:right; width:12px; height:12px;">');
       // $(this).addClass('darr');
        
    })

.select ul li.option {
    background-color: #DEDEDE;
    box-shadow: 0px 1px 0 #DEDEDE, 0px -1px 0 #DEDEDE;
    -webkit-box-shadow: 0px 1px 0 #DEDEDE, 0px -1px 0 #DEDEDE;
    -moz-box-shadow: 0px 1px 0 #DEDEDE, 0px -1px 0 #DEDEDE;
}

.select ul li.option:hover {
    background-color: #B8B8B8;
}

.select ul li.option {
    z-index:1;
    padding:5px;
    display:none;
}

.select ul li:first-child {
    display:block;
}

.select ul li {
    cursor:default;
}

.rarr:after, .darr:after {
    content: ' ▼ ';
    float:left;
    padding:0 5px;
}

<script src=".1.1/jquery.min.js"></script>
<div class="select">
  <ul style="width:150px;">
    <li values="1" class="option">Dropdown one</li>
    <li values="2" class="option">Dropdown two</li>
    <li values="3" class="option">Dropdown three</li>
    <ul>
</div>

I want to insert <img> tag in each <option>, since option tag doesn't accept tags inside it, I want make select box using ul and li with cancel icon inside each option on right side.

Here is my jsfiddle so far

    $('.select ul li.option').click(function() {
    		 $(this).siblings().children().remove();
       var a= $(this).siblings().toggle();
    console.log( $(a).is(":visible"));
      	 $(this).siblings().append('<img src="https://cdn4.iconfinder./data/icons/6x16-free-application-icons/16/Delete.png" style="float:right; width:12px; height:12px;">');
       // $(this).addClass('darr');
        
    })

.select ul li.option {
    background-color: #DEDEDE;
    box-shadow: 0px 1px 0 #DEDEDE, 0px -1px 0 #DEDEDE;
    -webkit-box-shadow: 0px 1px 0 #DEDEDE, 0px -1px 0 #DEDEDE;
    -moz-box-shadow: 0px 1px 0 #DEDEDE, 0px -1px 0 #DEDEDE;
}

.select ul li.option:hover {
    background-color: #B8B8B8;
}

.select ul li.option {
    z-index:1;
    padding:5px;
    display:none;
}

.select ul li:first-child {
    display:block;
}

.select ul li {
    cursor:default;
}

.rarr:after, .darr:after {
    content: ' ▼ ';
    float:left;
    padding:0 5px;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select">
  <ul style="width:150px;">
    <li values="1" class="option">Dropdown one</li>
    <li values="2" class="option">Dropdown two</li>
    <li values="3" class="option">Dropdown three</li>
    <ul>
</div>

still there is problem
1) bullets occures on left when opens.
2) cancel image does not disappear on close .

thanks

• javascript
• jquery
• html
• css

• There's an unclosed ul in your fiddle. – Adrian Commented Jul 13, 2016 at 8:33
• You want something like this? jsfiddle/fhpf6tpg/6 – Rajaprabhu Aravindasamy Commented Jul 13, 2016 at 8:34
• 1 First problem can solved usein CSS list-style:none and second problem is address of image. Add right address in src. See jsfiddle/fhpf6tpg/7 – Mohammad Commented Jul 13, 2016 at 8:36
• like this fiddle – Bogdan Kuštan Commented Jul 13, 2016 at 10:25
• THANKS . PROBLEM SORTED OUT – Pranesh Commented Jul 13, 2016 at 12:21

5 Answers 5

Bullets can be eradicated by using list-style:none css rule.

Other than that, you have to tweak your code little bit to make it usable as per your expectation.

  $('.select ul li.option').click(function() {
    //use addBack to add the clicked element to the collection.
    $(this).siblings().addBack().children().remove();
    var a = $(this).siblings().toggle();
    $(this).siblings().append('<img src="https://cdn4.iconfinder./data/icons/6x16-free-application-icons/16/Delete.png" style="float:right; width:12px; height:12px;">');
    //prepend the clicked element to the parent UL
    $(this).parent().prepend(this);
  })

DEMO

Here is the updated JSfiddle

Close of UL tag is missing

<div class="select">
  <ul style="width:150px;">
    <li values="1" class="option">Dropdown one</li>
    <li values="2" class="option">Dropdown two</li>
    <li values="3" class="option">Dropdown three</li>
  </ul>
</div>

As for the bullets;

.select ul {
    list-style: none;
}

Add this your CSS to hide the bullets

.select ul {
    list-style: none;
}

and the problem of image that does not disappear on close, If you closed the tag in a correct way it will be fine . you don't closed the ul , in your code

<ul style="width:150px;">
 <li values="1" class="option">Dropdown one</li>
 <li values="2" class="option">Dropdown two</li>
 <li values="3" class="option">Dropdown three</li>
</ul>

Try this :

$('.select ul li.option').click(function() {
  $(this).siblings().children().remove();
  var a= $(this).siblings().toggle();
  console.log( $(a).is(":visible"));
  $(this).siblings().append('<img src="https://cdn4.iconfinder./data/icons/6x16-free-application-icons/16/Delete.png" style="float:right; width:12px; height:12px;">');
  // $(this).addClass('darr');

})

.select ul{
  list-style:none;
}
.select ul li.option {
    background-color: #DEDEDE;
    box-shadow: 0px 1px 0 #DEDEDE, 0px -1px 0 #DEDEDE;
    -webkit-box-shadow: 0px 1px 0 #DEDEDE, 0px -1px 0 #DEDEDE;
    -moz-box-shadow: 0px 1px 0 #DEDEDE, 0px -1px 0 #DEDEDE;
}

.select ul li.option:hover {
    background-color: #B8B8B8;
}

.select ul li.option {
    z-index:1;
    padding:5px;
    display:none;
}

.select ul li:first-child {
    display:block;
}

.select ul li {
    cursor:default;
}

.rarr:after, .darr:after {
    content: ' ▼ ';
    float:left;
    padding:0 5px;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="select">
  <ul style="width:150px;">
    <li values="1" class="option">Dropdown one</li>
    <li values="2" class="option">Dropdown two</li>
    <li values="3" class="option">Dropdown three</li>
    </ul>
</div>

you can try this one:

you must add ul close tag like </ul>

<div class="select">
  <ul style="width:150px;">
    <li values="1" class="option">Dropdown one</li>
    <li values="2" class="option">Dropdown two</li>
    <li values="3" class="option">Dropdown three</li>
    </ul>
    </div>

DEMO HERE