Javascript multiple select boxes
Javascript multiple select boxes
我尝试寻找这个问题的答案一段时间,但无济于事。
我正在尝试做一个简单的在线计算器(计算一些光伏板的能量),但我被困在简单的东西上(我是Javascript的新手,尽管我使用Flash的ActionScript 3.0一段时间)。
我需要做的是一个 html 选择,用于定义页面中出现的其他选择组。像这样的东西(显然这不起作用,只是树立一个例子):
.HTML
<html>
<body>
<select id="test1" onclick="checkField()">
<option>Selected A Group</option>
<option>Selected B Group</option>
</select>
<script>//insert second group here</script>
</body>
</html>
爪哇语
function checkField(){
var temp = document.getElementById('test1').value;
if(temp === "Selected A Group"){
//insert code to "echo" the first optional select group
} else {
//insert code to "echo" the second optional select group
}
}
对不起,如果它有点令人困惑,但我不能很好地解释这一切。以下是我想要的示例,选择一个选项会使其他字段相应地更改:http://www.toshiba.eu/innovation/download_drivers_bios.jsp
你快到了,实际上 JavaScript 不会直接"回显"值,它会使用console.log(your value);
将值记录到调试控制台,类似于 AS2 trace()
如果我的内存没有出现故障。
要将信息"输出"到文档中,您应该查看 document.write当你使用document.write时,它将直接写入文档端。
"正确"的方法是创建一个 DOM 元素,其中包含您想要的元素,然后将其附加到所需的元素。看看评论
<!-- Be Aware to use the onchange trigger on select boxes, if you use onclick the function will run, even
if you didn't really chose any option -->
<select id="test1" onchange="checkField()">
<!-- Is good to have a first non-value option, better to trigger the onchange event, if you have
Select A Group as first option and you click on it, it didn't really "Change", you would have to
pick B Group and then A Group again to trigger the onchange event correctly. -->
<option value="">-- select an option --</option>
<!-- You can have a value attribute on the options, so it's easy to process when programming
while displaying a more detailed description to the users -->
<option value="A">Selected A Group</option>
<option value="B">Selected B Group</option>
</select>
<!-- We create an empty element where we are gonna place the new Select -->
<div id="newSelect"></div>
<!-- By Placing the Javascript on the end of <body>, we ensure that all the DOM elements loaded before running the script -->
<script>
function checkField(){
var newSelect = document.getElementById('newSelect'); //targeting container;
var temp = document.getElementById('test1').value;
//Some tasks we do always the option chose is not the first custom one, so we don't have to repeat it
//on the two If's below
if(temp !== ""){
// We remove the select if we placed one already before, so we can add the new one,
// For example if we chose B Group but changed our mind and Chose A Group later.
if(oldChild = newSelect.getElementsByTagName('select')[0]){
oldChild.remove();
}
var select = document.createElement("select");
select.setAttribute('id', 'newSelect');
}
if(temp === "A"){
//you could do JUST:
//body.innerHTML = "all the html you want in here" instead of all the code following;
//but all those code is supposed to be the "correct way" of adding elements to the HTML,
//Google a bit about that for detailed explanations
var option1 = document.createElement("option");
option1.value = 1;
option1.text = "Option 1";
var option2 = document.createElement("option");
option1.value = 2;
option2.text = "Option 2";
select.appendChild(option1);
select.appendChild(option2);
newSelect.appendChild(select);
} else {
var option1 = document.createElement("option");
option1.value = 3;
option1.text = "Option 3";
var option2 = document.createElement("option");
option1.value = 4;
option2.text = "Option 4";
select.appendChild(option1);
select.appendChild(option2);
newSelect.appendChild(select);
}
}
</script>
当然,有一些方法可以稍微缩短一点,如果你的数据输出有模式,请使用循环,但让我们用"简单"的方式去做,这样你就可以掌握Javascript。
希望这一切都对你有所帮助!!
演示在这里:http://jsfiddle.net/3GkrX/
和梅文斯差不多。虽然改为开关/外壳
.html:
<select id="test1" id="name" onchange="checkField()">
<option>----</option>
<option>Selected A Group</option>
<option>Selected B Group</option>
</select>
<div id="optional">Please select!</div>
.JS:
function checkField(){
var temp = document.getElementById('test1').value;
switch(temp){
case "Selected A Group":
document.getElementById("optional").innerHTML="<select name='optionalA'><option>1</option><option>2</option></select>";
break;
case "Selected B Group":
document.getElementById("optional").innerHTML="<select name='optionalB'><option>3</option><option>4</option></select>";
break
default:
document.getElementById("optional").innerHTML="Please select!";
break;
}
}
还添加了第二组作为实际选项,并将默认值添加为"请选择"。 在您的情况下可能是必需的,也可能不是必需的
这是演示 http://codepen.io/anon/pen/izAHo你做得几乎是对的。
您应该将 onclick 事件放在选项标记上,以根据所选选项触发更改。
.HTML
<html>
<body>
<select id="test1">
<option onclick="checkField()">Selected A Group</option>
<option>Selected B Group</option>
</select>
<select id="test2">
<option onclick="check2Field()">Selected C Group</option>
<option>Selected D Group</option>
</select>
<script>//insert second group here</script>
</body>
</html>
.JS
function checkField(){
var temp = document.getElementById('test1').value;
if(temp === "Selected A Group"){
document.getElementById('test2').innerHTML="<option>Selected halloooo Group</option>";
} else {
//insert code to "echo" the second optional select group
}
}
查看我的演示以获得更清晰的信息。
- jquery点击函数select&取消选择
- 在html Select中添加搜索
- Jquery:未触发select事件
- 如何在PHP中使用$_POST获取Select元素值
- 无法在Ionic select中预先选择最后一个选项
- Dojo:访问dijit.form.Select中单击的项目
- X秒后刷新select元素
- 根据select选项元素将表单重定向到不同的URL
- 在select元素中显示highchart dashstyle(svg)
- jQuery动态表单显示在select选项上
- Javascript Select OnChange没有'不要第二次工作
- 更改基于它的Select OPTION's INDEX(Jquery)
- 正在获取select上的功能id
- 根据Select值添加/删除表行
- 如何将CSS(特别是填充/边距)应用于select下拉菜单的选项或optgroup
- 如何在触发事件后选择select选项
- JQuery 遍历当前 SELECT 值
- 当使用select作为标签时,如何使用ng选项禁用angularjs中的选项
- Javascript multiple select boxes
- Javascript onchange select boxes