locked
Insert Image RRS feed

  • Question

  • User1136423486 posted

    How can i give url for image in select option

    Tuesday, June 9, 2020 4:06 AM

Answers

All replies

  • User-719153870 posted

    Hi Noobewolf,

    I'm not sure if the requirement is understood correclty.

    If you want to set the url of the image as the options of select, then it should be noticed that image is not a valid element in option.

    Or if you want to change the url of some image via changing select options, then i would suggest to achieve this via JQuery.

    Check below demo:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="Scripts/jquery-3.4.1.min.js"></script>
        <script>
            $(function () {
                $('#mySelect').on('change', function () {
                    var id = $(this).val();
                    if (id == 1) { $("#img1").attr("src", "Files/FCF.jpg"); }
                    else if (id == 2) { $("#img1").attr("src", "Files/CC.jpg"); }
                    else { $("#img1").attr("src", "Files/FCF2.jpg"); }
                });
            })
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <img id="img1" src="Files/FCF.jpg" style="width:500px;height:300px;" />
                <select id="mySelect">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                </select>
            </div>
        </form>
    </body>
    </html>

    Here's the result of this demo:

    Or, if the requirement is misunderstood, please provide a more detailed description. Thanks!

    Best Regard,

    Yang Shen

    Tuesday, June 9, 2020 5:38 AM
  • User1136423486 posted

    if image is not valid for option means 

    how can i use image in the option. there is anyway?or

    can we use fa fa icon in  option.how?

    Tuesday, June 9, 2020 9:07 AM
  • User-719153870 posted

    Hi Noobewolf,

    Seems for specific browser like Firefox, set image as the option's bg-image will work(not tested), you can refer to How to add images in select list?

    For other browsers, a common way requires js and css to do some trick, please check Adding Image To Select List With Cross Browser Compatibility for example.

    Best Regard,

    Yang Shen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 9, 2020 9:33 AM