[英]Javascript multiple select boxes
我試了一段時間尋找答案,但無濟於事。
我正在嘗試做一個簡單的在線計算器(可以計算一些光伏電池板的能量),但是我陷入了一個簡單的難題(盡管我曾經使用Flash的ActionScript 3.0了一段時間,但我對Javascript還是陌生的)。
我需要做的是一個HTML select,它定義了哪個其他select組出現在頁面中。 這樣的事情(顯然這是行不通的,僅舉一個例子):
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>
Java腳本
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);
記錄值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://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
}
}
查看我的演示以獲得更多清晰度。
此處的演示: http : //jsfiddle.net/3GkrX/
幾乎和Mevins一樣。
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;
}
}
還添加了第二組作為實選項,默認添加為“請選擇”。 在您的情況下可能是必需的
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.