0

我试图寻找这个问题的答案一段时间，但无济于事。

我正在尝试做一个简单的在线计算器（计算一些光伏电池板的能量），但我被困在一些简单的事情上（虽然我使用 Flash 的 ActionScript 3.0 有一段时间，但我是 Javascript 的新手）。

我需要做的是一个 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>

Javascript

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

4

3 回答 3

1

你快到了，实际上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。

希望这一切对你有帮助！！

于 2013-10-18T11:04:23.333 回答
0

这是演示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
}
}

查看我的演示以获得更清晰的信息。

于 2013-10-18T10:29:49.023 回答
0

演示在这里：http: //jsfiddle.net/3GkrX/

和 Mevins 差不多……虽然改成 switch/case

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;

    }

}

还添加了第二组作为实物期权，默认为“请选择”。在您的情况下可能需要也可能不需要

于 2013-10-18T10:32:18.723 回答