i want to display image in select option dynamically but not working

Question

i want to show images in coming from database, but its not displaying. There is no error at all even i checked with console, but if i display image out of select its works.

How to display images?

 <select data-show-subtext="true" class=" selectpicker bs-select form- 
   control" data-live-search="true" data-size="8" name="drawing">

   <option value=""></option>
   <?php  foreach($get_drawing as $row):   ?>   

   <option data-subtext="" value="<?php echo $row->drawing_id; ?>" >
       <?php echo $row->drawing_name;?> 
       <img width="22%" height="10%" class=""  src="<?php 
           echo base_url('drawing/fabricator/admin_3/'.$row->image); ?>">
       </img>
   </option>   

   <?php endforeach; ?>
 </select>

path is ok because image displaying outside of select works but not in select — Adi King, Mar 28 '18 at 12:43
Possible duplicate of [How to add a images in select list](https://stackoverflow.com/questions/2965971/how-to-add-a-images-in-select-list) — CBroe, Mar 28 '18 at 12:43
You can not add other HTML elements inside `option`, the content model for those is text only. — CBroe, Mar 28 '18 at 12:44

Oussama · Answer 1 · 2018-03-28T12:50:50.093

1

HTML default select allow only text display in option.

If you want to display images inside your select options you need to do it in javascript by creating a fake select acting on the real one on change.

There is a lot of jquery plugins doing that.

The most famous plugin is select2, you can find it here https://select2.org/ and an example in here https://select2.org/dropdown

edited Mar 28 '18 at 12:50

answered Mar 28 '18 at 12:43

Oussama

595
5
16

thanks for your answer ... but am already using plugin selectpicker instead of select2 can you provide me any link with selectpicker for this work – Adi King Mar 28 '18 at 12:50
I don't know if you are using this plugin https://silviomoreto.github.io/bootstrap-select/examples/ But as I saw in the examples page, it doesnt allow images. I think select2 is the best: easy to use and very well documented – Oussama Mar 28 '18 at 12:54

score 1 · Accepted Answer · answered Mar 28 '18 at 12:55

Hope this will you

you can use data-subtext in the options

your select should be like this :

<select data-show-subtext="true" class=" selectpicker bs-select form- control" data-live-search="true" data-size="8" name="drawing">

    <option value=""></option>
    <?php  foreach($get_drawing as $row):   ?>   
    <option data-subtext="<img width='22%' height='10%''  src='<?=base_url("drawing/fabricator/admin_3/".$row->image);?>'>"  
    value="<?php echo $row->drawing_id; ?>"  >
     <?php echo $row->drawing_name;?> 
    </option>


  <?php endforeach; ?>
 </select>

Result Looks like :

<select class="selectpicker" data-size="5" tabindex="-98">
  <option value="1" data-subtext="<img src='http://localhost/drawing/fabricator/admin_3/logo-dark.png'>">Ketchup</option>
</select>

for more : https://silviomoreto.github.io/bootstrap-select/examples/#styling

but dear your answer works but there is some syntax error please make it correct so that i can mark as a answer — Adi King, Mar 28 '18 at 13:15
dear how to write this in append function please help me out because its doesn't work in append function giving a syntax error — Adi King, Mar 28 '18 at 14:09

ElasticCode · Answer 3 · 2018-03-28T13:05:19.510

0

You can add an image to select options using style attribute with background property

background: url('drawing/fabricator/admin_3/' + image ) no-repeat 100% 100%;'

For more information check my answer here also
https://stackoverflow.com/a/49469243/3134112

edited Mar 28 '18 at 13:05

answered Mar 28 '18 at 12:43

ElasticCode

7,311
2
34
45

i tried your solution but its displaying as a background image on full length but when i limited size its gone away – Adi King Mar 28 '18 at 13:08
you can play with size by change the `100% 100%` values – ElasticCode Mar 28 '18 at 13:10
i got my solution but your idea was also good buddy thanks for contribution – Adi King Mar 28 '18 at 13:31

score 0 · Answer 4 · answered Mar 28 '18 at 13:01

0

You can add a image in dropdown option, it work only on Firefox:

<select>
  <option style="background-image:url(apple.png);">Apple</option>
  <option style="background-image:url(orange.png);">Orange</option>
</select>

Else, you can use a JS widget library as:

Select2: Exemple: https://jsfiddle.net/fr0z3nfyr/uxa6h1jy/

Bootstrap-select: https://silviomoreto.github.io/bootstrap-select/examples/#icons

answered Mar 28 '18 at 13:01

louk

97
6

if its only work with firefox ?? then what will do others users of chrome safari etc – Adi King Mar 28 '18 at 13:31
It remain an option for firefox users, for others as mentioned you must use JS, in your case with bootstrap-select, you can add icons in options, check the link above! – louk Mar 28 '18 at 14:08

i want to display image in select option dynamically but not working

4 Answers4