发表新帖
发表新帖

How to add images in select list?

后端 未结
关注
14 1433
小鲜肉
小鲜肉 2020-11-21 11:18

I have a select list of genders.

Code:
提交评论
  •  加载中...
  • 南笙
    2020-11-21 11:50

    For those wanting to display an icon, and accepting a "black and white" solution, one possibility is using character entities:

       <select>
      <option>100 &euro;</option>
      <option>89 &pound;</option>
    </select>

    By extension, your icons can be stored in a custom font. Here's an example using the font FontAwesome: https://jsfiddle.net/14606fv9/2/ https://jsfiddle.net/14606fv9/2/

    One benefit is that it doesn't require any Javascript. However, pay attention that loading the full font doesn't slow down the loading of your page.

    Nota bene: The solution of using a background image doesn't seem working anymore in Firefox (at least in version 57 "Quantum"): 

    <select>
  <option style="background-image:url(euro.png);">100</option>
  <option style="background-image:url(pound.png);">89</option>
</select>
    0 讨论(0)
  • 轮回少年
    2020-11-21 11:51

    This is using ms-Dropdown : https://github.com/marghoobsuleman/ms-Dropdown

    Data resource is json. But you dont need to use json. If you want you can use with css.

    Css example : https://github.com/marghoobsuleman/ms-Dropdown/tree/master/examples

    Json Example : http://jsfiddle.net/tcibikci/w3rdhj4s/6

    HTML

    <div id="byjson"></div>

    Script

    <script>
        var jsonData = [
            {description:'Choos your payment gateway', value:'', text:'Payment Gateway'},
            {image:'https://via.placeholder.com/50', description:'My life. My card...', value:'amex', text:'Amex'},
            {image:'https://via.placeholder.com/50', description:'It pays to Discover...', value:'Discover', text:'Discover'},
            {image:'https://via.placeholder.com/50', title:'For everything else...', description:'For everything else...', value:'Mastercard', text:'Mastercard'},
            {image:'https://via.placeholder.com/50', description:'Sorry not available...', value:'cash', text:'Cash on devlivery', disabled:true},
            {image:'https://via.placeholder.com/50', description:'All you need...', value:'Visa', text:'Visa'},
            {image:'https://via.placeholder.com/50', description:'Pay and get paid...', value:'Paypal', text:'Paypal'}
        ];
        $("#byjson").msDropDown({byJson:{data:jsonData, name:'payments2'}}).data("dd");
    }
</script>
    0 讨论(0)
  • 情深已故
    2020-11-21 11:53

    Another jQuery cross-browser solution for this problem is http://designwithpc.com/Plugins/ddSlick which is made for exactly this use.

    0 讨论(0)
  • 时光说笑
    2020-11-21 11:58

    I got the same issue. My solution was a foreach of radio buttons, with the image at the right of it. Since you can only choose a single option at radio, it works (like) a select.

    Worket well for me. Hope it can help someone else.

    0 讨论(0)
  • 天涯浪人
    2020-11-21 12:04

    You can use iconselect.js; Icon/image select (combobox, dropdown)

    Demo and download; http://bug7a.github.io/iconselect.js/

    enter image description here

    HTML usage;

    <div id="my-icon-select"></div>

    Javascript usage;

        var iconSelect;

    window.onload = function(){

        iconSelect = new IconSelect("my-icon-select");

        var icons = [];
        icons.push({'iconFilePath':'images/icons/1.png', 'iconValue':'1'});
        icons.push({'iconFilePath':'images/icons/2.png', 'iconValue':'2'});
        icons.push({'iconFilePath':'images/icons/3.png', 'iconValue':'3'});

        iconSelect.refresh(icons);

    };
    0 讨论(0)
    • 1 2 3 下一页
     看不清?
    提交回复
    热议问题