如何点击按钮更改下拉菜单的内容？ [英] How can a click of a button change the content of a drop down menu?
本文介绍了如何点击按钮更改下拉菜单的内容？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我希望在单击一个按钮时，在同一个文档中稍后会出现一个下拉菜单中的某些值。
例如，如果有是一个名为本田的按钮，点击它可以将下拉菜单中的内容更改为车型的详细信息。
这怎么可能？
语境：启用PHP的服务器上的网页
预先感谢！
解决方案
我建议最简单的解决方案是一个JavaScript。似乎重载使用一个框架来完成这样一个简单的任务：
< html>
< head>< title> JS示例< / title>< / head>
< body>
< script type =text / javascript><！ -
//
var opt_one = new Array（'blue'，'green'红'）;
var opt_two = new Array（'plaid'，'paisley'，'stripes'）;
//
function updateTarget（）{
var f = document.myform;
var which_r = null;
如果（f）{
//选择了第一个选项？ （One）
if（f.trigger.value =='1'）{
which_r = opt_one;
// ...或者，选择第二个选项？ （Two）
} else if（f.trigger.value =='2'）{
which_r = opt_two;
//没有已知选项，隐藏辅助弹出窗口
} else {
f.target.style.display ='none';
}
//我们是否找到了选择的二级选项？
if（which_r）{
//重设/清除目标弹出窗口
f.target.innerHTML ='';
//添加每个选项
for（var opt in which_r）{
f.target.innerHTML + ='< option>'+ which_r [opt] +'< ; /选项>';
}
//显示辅助弹出窗口
f.target.style.display ='inline';
}
}
} // updateTarget（）
// - >
< / script>
< form name =myformaction =＃>
< select name =triggeronchange =updateTarget（）;>
< option>选择一个...< / option>
< option> - < / option>
< option value =1>一个< / option>
< option value =2>两个< / option>
< / select>
< select name =targetstyle =display：none;>
< / select>
< / form>
< / body>
< / html>
I would like to make it that when a button is clicked a certain values in a drop down menu appears later on in the same document.
For example if there was a button called Honda and it is clicked it would change the content in a drop down menu to the model details of the car.
How is it possible to do this?
CONTEXT: Webpage on a PHP enabled server
Thanks in advance!
解决方案
I suggest the simplest solution is a JavaScript. Seems overload to use a framework for such a simple task:
<html>
<head><title>JS example</title></head>
<body>
<script type="text/javascript"><!--
//
var opt_one = new Array('blue', 'green', 'red');
var opt_two = new Array('plaid', 'paisley', 'stripes');
//
function updateTarget() {
var f = document.myform;
var which_r = null;
if (f) {
// first option selected? ("One")
if (f.trigger.value == '1') {
which_r = opt_one;
// ...or, second option selected? ("Two")
} else if (f.trigger.value == '2') {
which_r = opt_two;
// no known option, hide the secondary popup
} else {
f.target.style.display = 'none';
}
// did we find secondary options for the selection?
if (which_r) {
// reset/clear the target pop-up
f.target.innerHTML = '';
// add each option
for (var opt in which_r) {
f.target.innerHTML += '<option>' + which_r[opt] + '</option>';
}
// display the secondary pop-up
f.target.style.display = 'inline';
}
}
} // updateTarget()
//-->
</script>
<form name="myform" action="#">
<select name="trigger" onchange="updateTarget();">
<option>Select one...</option>
<option>-</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
<select name="target" style="display:none;">
</select>
</form>
</body>
</html>
这篇关于如何点击按钮更改下拉菜单的内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
