我有一个下拉列表,当我从该下拉列表中选择一个项目时,会出现一个列表,该列表对应于该项目来自列表框中的json。但我不想拥有列表框,我希望有复选框,以便我可以选择多个项目。我试图将此列表框转换为复选框,但没有得到预期的结果,因为我不想硬编码数据..我从json获取..请帮忙! 我的html文件
<form name="myform" id="myForm">
<select id="dropdown1"></select>
<div id="listbox" ></div>
<br>
</form>
我的js代码
$(document).ready(function() {
$.ajax({
url: "data.json",
dataType: "json",
success: function(obj) {
var jsObject = obj;
var usedNames = [];
$('<option>', {
text: 'Select your Option',
value: '',
selected: 'selected',
disabled: 'disabled'
}).appendTo('#dropdown1');
$.each(obj, function(key, value) {
if (usedNames.indexOf(value.name) == -1) {
$("#dropdown1").append("<option value=" + key + ">" + value.name + "</option>");
usedNames.push(value.name);
}
$('#dropdown1').change(function() {
$('#listbox').empty();
$('<option>', {
text: 'Select your List Option',
value: '',
selected: 'selected',
disabled: 'disabled'
}).appendTo('#listbox');
var selection = $('#dropdown1 :selected').text();
// var selection = $('#dropdown1 :selected').text();
$.each(jsObject, function(index, value) {
if (value['name'] == selection) {
var optionHtml = '';
for (var i = 1; i <= 20; i++) {
var attr = 'attr' + ('000' + i).substr(-3);
optionHtml += '<option value="' + attr + '">' + value[attr] + '</option>';
}
$('#listbox').append(optionHtml); return false;
}
});
});
});
}
});
});