我有一个简单的类Pet
:地图JSON条目来选择选项
public class Pet{
private name;
private age;
}
和HashMap<String,<Pet>>
- 的String
值是一个孩子的名字。 在HTML文件中我得到此HashMap中JSON,例如:
{"Jon":[{"name":"dog","age":5},{"name":"cat","age":4},{"name":"parrot","age":3}],"Paul":[{"name":"parrot","age":3}]}
有两个select
在我的HTML,第一个代表孩子的名字,第二个是宠物:
<select id="Child">
<option value="Jon">Jon</option>
<option value="Paul">Paul</option>
</select>
<select id="Pet">
</select>
我想选择child's name
,然后把第二个select
名为Pets
这个孩子。我知道不可能加载所有数据,然后使用'hide'和'show'之类的东西。那么decode
我的Json
对某些数组的最佳方式是什么,然后动态添加它以清除select
?
@Update 我的html:
<html>
<head>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
// Parse the JSON string into a proper object
let data = JSON.parse('{"Jon":[{"name":"dog","age":5},{"name":"cat","age":4},{"name":"parrot","age":3}],"Paul":[{"name":"parrot","age":3}]}');
// References to both SELECT elements
let child = document.getElementById('Child');
let pet = document.getElementById('Pet');
// An event listener to handle changes to the child-select
child.addEventListener('change', function() {
// Attempt to look-up the selected value in our JSON
let option = data[this.value];
// Proceed only if a match (with depth) is found
if (option && option.length) {
// Create a fragment, and add option elements
let fragment = document.createDocumentFragment();
option.forEach(function (item) {
let entry = document.createElement("option");
entry.value = item.name;
entry.textContent = item.name;
fragment.appendChild(entry);
});
// Clear the pet-select of any values, re-populate
pet.innerHTML = '';
pet.appendChild(fragment);
}
});
</script>
</head>
<body>
<select id="Child">
<option value="Jon">Jon</option>
<option value="Paul">Paul</option>
</select id="Pet">
<select id="Pet">
</select>
</body>
</html>
所以,如果'#Child'存在于你的JSON文件中,你希望相应对象的'name'属性被列为'#Pet'的值? – Sampson
这正是我想要 – littlewombat