3

I want to implement simple drop down list with images as values. I want to use ajax to render images on options lists and send partial post backs when i choose some values from option lists. Here are the codes.

<html>
<head>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  </head>
</head>
<body>
 <select id="localeId">
 </select>
<script type="text/javascript">
    $select = $('#localeId'); 
        $.ajax({
            url: '../assets/json/languages.json',
            dataType:'JSON',
            success:function(data){
                $select.html('');
                $.each(data.languages, function (key, val) {
                    $select.append('<option id="' + val.id + '">' + val.name + '</option>');
                })
            },
            error:function(){
                $select.html('<option id="-1">none available</option>');
            }
        });
</script>
</body>
</html>

This is Json Data.

"languages": [
    {
        "name": "English",
        "id": 1,
        "selected": false,
        "description": "English",
        "imageSrc": "assets/img/flags-icons/en-flag.png"
    },
    {
        "name": "Postegues",
        "id": 2,
        "selected": false,
        "description": "Postegues",
        "imageSrc": "assets/img/flags-icons/pt-flag.png"
    },
    {
        "name": "Russian",
        "id": 3,
        "selected": false,
        "description": "Russian",
        "imageSrc": "assets/img/flags-icons/ru-flag.png"
    },
    {
        "name": "Spanish",
        "id": 4,
        "selected": false,
        "description": "Spanish",
        "imageSrc": "assets/img/flags-icons/es-flag.png"
    }
]
Riddi Kumar Shrestha
  • 98
  • 1
  • 9
  • 1
    Check out this question here, there's a few answers you might find useful :) http://stackoverflow.com/questions/4941004/putting-images-with-options-in-a-dropdown-list – Drummad Jun 30 '15 at 08:32

1 Answers1

1

The default HTML <select> uses the operating system to render the <opiton> under it. You'll have to build your own "selection/dropdown"-like component.

But, to your fortunate, jQuery has done it for you already! check out their "select-menu" widget here: http://jqueryui.com/selectmenu/#custom_render

Ziv Levy
  • 1,904
  • 2
  • 21
  • 32
  • 1
    Thanks for your answer.But I want to use ajax for it. Actually i want drop down list with countries flags,and when i choose any flag then it's value should be passed to my localization function to change page's languages.Even without ajax when i select any flags it send to server each time.I want to make my drop down list to work on client side with some refresh not with post back. Is it possible with JQuery only. – Riddi Kumar Shrestha Jun 30 '15 at 09:45
  • ajax is not related to the problem's root. the root is that in order to customize your drop-down you'll have to create one or use a framework that does it for you such as `jQuery` or `WebComponents`. ajax is just the way to get the data from... nothing more. – Ziv Levy Jun 30 '15 at 14:36