我想实现以图像为值的简单下拉列表。当我从选项列表中选择一些值时，我想使用 ajax 在选项列表上呈现图像并发送部分回发。这是代码。
<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>
这是 Json 数据。
"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"
}
]
最佳答案
默认 HTML <select>使用操作系统呈现 <opiton>在它下面。您必须构建自己的“选择/下拉”类组件。
但是，幸运的是，jQuery 已经为您完成了! 在这里查看他们的“选择菜单”小部件:http://jqueryui.com/selectmenu/#custom_render
关于javascript - 如何使用 ajax 和 json 将图像呈现为下拉列表？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31133111/