CODEWITHSUNDEEP
phpimagecodeigniter
Adi King
Adi King

Reputation: 25

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

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>

Upvotes: 1

Views: 8382

Answers (4)

ElasticCode
ElasticCode

Reputation: 7875

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

Upvotes: 0

louk
louk

Reputation: 97

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

Upvotes: 0

Pradeep
Pradeep

Reputation: 9707

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

Upvotes: 1

Oussama
Oussama

Reputation: 634

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

Upvotes: 1

Related Questions