从有两个下拉列表的100个项目中选择一个
提问于 2016-02-21 20:17:25
我有十个类别，每一个都有十个子类别。我需要让用户选择一个子类别，但我不想在一个下拉列表中放置100个选项。我的想法是有一个类别下降与这十个类别，也有一个子类别下降。根据从第一个下拉列表中选择的类别，该子类别下拉列表将填充该类别的十个子类别。因此，用户可以选择两个选择的100个子类别中的一个。
我不能用PHP实现这一点，因为当页面加载并运行PHP时，不知道将选择哪个类别。我认为，类别选择必须触发一些Ajax，从而降低所选类别的子类别选项，并将它们放入子类别下拉列表中。有没有人对最好的方法有什么想法？
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-02-21 22:31:12
您可以使用json_encode或ajax加载子类别，然后使用js删除并追加select更改事件上的选项。
示例：https://plnkr.co/edit/LFB2cxFQaNByiE6MwS7B?p=preview
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@2.1.3" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<select id="selectCategory">
<option value="1">first</option>
<option value="2">second</option>
<option value="3">third</option>
</select>
<select id="subCategories">
<option value="1">1-1</option>
<option value="2">1-2</option>
<option value="3">1-3</option>
</select>
<script>
// load subcategories with json_encode or ajax
var subcategories = [{
category: '1',
val: 1,
text: '1-1'
}, {
category: '1',
val: 2,
text: '1-2'
}, {
category: '1',
val: 3,
text: '1-3'
}, {
category: '2',
val: 1,
text: '2-1'
}, {
category: '2',
val: 2,
text: '2-2'
}, {
category: '2',
val: 3,
text: '2-3'
}, {
category: '3',
val: 1,
text: '3-1'
}, ];
$("#selectCategory")
.change(function() {
var category = this.value;
$("#subCategories")
.find('option')
.remove();
subcategories.forEach(function(s) {
if (s.category === category) {
$("#subCategories")
.append('<option value="' + s.val + '">' + s.text + '</option>');
}
});
});
</script>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35545743
复制相关文章
点击加载更多
腾讯云开发者
