How to display images as dropdowns using ajax and json?
I want to implement a simple dropdown list with images as values. I want to use ajax to render images in option lists and send partial messages after some values are selected 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"
}
]
+3
source to share
1 answer
HTML <select>
by default uses the operating system to render <opiton>
under it. You will need to create your own "selection / dropdown" component.
Thankfully, jQuery has already done it for you! check out their select-menu widget here: http://jqueryui.com/selectmenu/#custom_render
+1
source to share