根据以前的选择显示选择选项 [英] display select options based on previous selections
问题描述
我试图显示下拉菜单的类别和子类别。自从我使用javascript以来已经有几年了，所以我遇到了一些问题。我只是没有填充html选择输入的代码。我不知道代码是否过于简单，或者如果我刚刚犯了一些小错误，但我似乎无法使它工作。也许有人可以告诉我我要出错的地方。谢谢。
< html>
< select name =catid =menu1class =menu>< / select>
< select name =subcatid =menu2class =menu>< / select>
< / html>
< script type =text / javascript>
$ b var data = {
category：[sub-category]，
music：[sub-category，rock，punk ]，
电影：[sub-categoy，喜剧，戏剧]，
电视：[sub-catery，sit-com，肥皂剧]，
}
for（var i in data）{
$（'＃menu1'）。append（'< option>'+ i +'< / option>'）;
$ b $（'＃menu1'）。change（function（）{
var key = $（this）.val（）;
$（'＃menu2'）。empty（）;
for（var in data [key]）{
$（'＃menu2'）。append（'< option>'+ data [key] [i] +'< / option>'）;
}
}）。trigger（'change'）;
< / script>
您已发布jQuery代码。例如： $（'＃menu1'）
所以一定要在脚本标记中调用jQuery库，并把所有这样的代码放入一个像这样的jQuery块中：
UPDATE
我已修复代码以使其正常工作。在这里看到它的行动： http://jsfiddle.net/QYcMt/1/
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1.7 0.2 / jquery.min.js>< /脚本>
< script type =text / javascript>
$（函数（）{
var data = {
category：[sub-category]，
music：[
电影：[sub-categoy，喜剧，戏剧]，
电视：[sub-catery ，sit-com，soap opera]，
};
$ .each（数据，函数（键值）{
$（'＃menu1'）。append（$（'< option />').text(key））;
}）;
$ （'＃menu1'）。change（function（）{
var key = $（this）.val（）;
$（'＃menu2'）。empty（）;
for （data [key]）{
$（'＃menu2'）。append（'< option>'+ data [key] [i] +'< / option>'）;
$ b}）。trigger（'change'）;
< / script>
i'm trying to display drop-down menus 'category'and subcategories. it's been a few years since I used javascript, so I am having some problems. the code I have simply is not populating the html select input. I don't know if the code is too simplistic or if I have just made some small error, but I cant seem to get it work. maybe someone can show me where I'm going wrong. Thanks.
<html>
<select name="cat" id="menu1" class="menu"></select>
<select name="subcat" id="menu2" class="menu"></select>
</html>
<script type = "text/javascript">
var data = {
"category":["sub-category"],
"music": ["sub-category","rock", "punk"],
"film": ["sub-categoy","comedy", "drama"],
"tv": ["sub-catery","sit-com", "soap opera"],
}
for (var i in data) {
$('#menu1').append('<option>' + i + '</option>');
}
$('#menu1').change(function() {
var key = $(this).val();
$('#menu2').empty();
for (var i in data[key]) {
$('#menu2').append('<option>' + data[key][i] + '</option>');
}
}).trigger('change');
</script>
You've posted jQuery code. E.g.: $('#menu1')
So be sure to call the jQuery library in a script tag, and place all such code inside a jQuery block like this:
UPDATE
I've fixed the code to make it work. See it in action here: http://jsfiddle.net/QYcMt/1/
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type = "text/javascript">
$(function () {
var data = {
"category":["sub-category"],
"music": ["sub-category","rock", "punk"],
"film": ["sub-categoy","comedy", "drama"],
"tv": ["sub-catery","sit-com", "soap opera"],
};
$.each(data, function(key, value){
$('#menu1').append($('<option />').text(key));
});
$('#menu1').change(function() {
var key = $(this).val();
$('#menu2').empty();
for (var i in data[key]) {
$('#menu2').append('<option>' + data[key][i] + '</option>');
}
}).trigger('change');
</script>
这篇关于根据以前的选择显示选择选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
