我想创建两个下拉表单，如果我在第一个菜单上选择一个项目，第二个菜单将显示相应的值。例如：如果我在第一个菜单上选择“水果”，那么第二个菜单将显示“苹果”、“香蕉”等。它必须有值，以便我可以将其插入数据库。
html如下：
<select id="firstmenu" name="fruit">
<option value="apple">apple</option>
<option value="banana">banana</option>
</select>
<br/>
<select id="secondmenu" name="vegetable">
<option value="carrot">carrot</option>
<option value="celery">celery</option>
</select>
javascript;我正在考虑使用这样的东西，但我缺乏对 javascript 的理解
<script>
var a=document.forms["myform"]["fruit"].value;
var b=document.forms["myform"]["vegetable"].value;
if (a=="fruit")
{
...
}
</script>
有人可以给我一个代码示例吗？非常感谢您的帮助，谢谢。
Well,
使用 jQuery 怎么样？
var items = [{
name: '---',
value: '',
subitems: []
},
{
name: 'Fruit',
value: 'fruit',
subitems: [{
name: 'Apple',
value: 'apple'
},
{
name: 'Banana',
value: 'banana'
}
]
},
{
name: 'Vegetable',
value: 'vegetable',
subitems: [{
name: 'Carrot',
value: 'carrot'
},
{
name: 'Celery',
value: 'celery'
}
]
}
];
$(function() {
var temp = {};
$.each(items, function() {
$("<option />")
.attr("value", this.value)
.html(this.name)
.appendTo("#firstmenu");
temp[this.value] = this.subitems;
});
$("#firstmenu").change(function() {
var value = $(this).val();
var menu = $("#secondmenu");
menu.empty();
$.each(temp[value], function() {
$("<option />")
.attr("value", this.value)
.html(this.name)
.appendTo(menu);
});
}).change();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="firstmenu" name="fruit"></select>
<br/>
<select id="secondmenu" name="vegetable"></select>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
