Add background images in dropdown list in option

Question

I am trying to add background images in option but it cannot work properly. How can i do?Thank you

select #imge option[value="1"] {
  background-image: url(tree.png);
}

<div id="ddls">
  <select id="imge" class="ddls">

    <option value="nothing"></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>

  </select>

</div>

Possible duplicate of [How to add background image for options in a select box?](https://stackoverflow.com/questions/11207223/how-to-add-background-image-for-options-in-a-select-box) — Constantin Groß, Jun 07 '19 at 06:40
@Connum if i select option 1 , it's going to display back ground image in body, not in option background — kanja, Jun 07 '19 at 06:54
@ connum does it cannot read it ? background-image: url(tree.png); — kanja, Jun 07 '19 at 07:08

score 0 · Accepted Answer · answered Jun 07 '19 at 11:34

0

You may use select2.js.

Do check out the GitHub link

answered Jun 07 '19 at 11:34

meDeepakJain

156
1
13

@ Deepak Jain: Thank you, can we add if condition in select option. Example: if one dropdown having country list and one more dropdown having states .If i select India-second dropdown show states. If i select state it will show map of that state in body. I found one from -STACK OVER FLOW but how to conent forst drop down with second dropdown https://stackoverflow.com/questions/31162565/show-different-body-background-image-based-on-selection/56490604#56490604 – kanja Jun 07 '19 at 12:09
I would suggest you to search for **"How to populate dropdowns"** on stackoverflow or on search engine. You'll for sure get a solution easily. Note: No condition required. – meDeepakJain Jun 07 '19 at 12:41
@ i added image in value(option), when i select option image is repeating. How can i assign propertirs if i add image in value?Ty – kanja Jun 17 '19 at 12:04
I cannot help without checking out your code. But, do cross check whether you're iterating the option value within your loop. – meDeepakJain Jun 17 '19 at 14:27
dog ---i written like this – kanja Jun 17 '19 at 16:54
Is it under any loop or written as static? Please showcase the code properly. – meDeepakJain Jun 17 '19 at 17:05
it's not under any loop, but i written jquery to change image lengths $('#size').change(function(event){$('body').removeClass('cat dog'); $('body').addClass( 'flash-bar-size-' + $(this).val() ); – kanja Jun 18 '19 at 07:46
I can't help out with the partial codes you're sharing. Second point, I'm confused why are you adding/removing class. I guess you are having concern with image URLs and you're playing with classes. – meDeepakJain Jun 18 '19 at 10:05
Actually i having different images for different options. By selecting option from dropdown image going to change. I am trying to add background image for every option. – kanja Jun 18 '19 at 10:30
You may use the code as shared here.. ` ` – meDeepakJain Jun 18 '19 at 10:49

Add background images in dropdown list in option

1 Answers1