Question

我正在尝试根据下拉选项更改某些表单选项。我想我正确编写了javascript，但我不确定。如果有人能够至少让我指向正确的方向，或者是否有更好的方法来完成相同的事情，那也没关系。我是javascript的新手。

这是代码。

<form method="post">
    <div class="row requiredRow">
        <label for="ClassName" id="ClassName-ariaLabel">Class Name:</label>
        <input id="ClassName" name="ClassName" type="text" aria-labelledby="ClassName-ariaLabel" class="required" title="Class Name:. This is a required field">
    </div>
    <div class="row">
        <label for="ProfessorName" id="ProfessorName-ariaLabel">Professor Name:</label>
        <input id="ProfessorName" name="ProfessorName" type="text" aria-labelledby="ProfessorName-ariaLabel">
    </div>
    <div class="row requiredRow">
        <label for="GradingScale" id="GradingScale-ariaLabel">Grading Scale:</label>
        <select id="GradingScale" name="GradingScale" aria-labelledby="GradingScale-ariaLabel" class="required" title="Grading Scale:. This is a required field">
            <option value="1">A,A-,B+,B,B-,C+,C,C-,D+,D,D-,F</option>
            <option value="2">A,B,C,D,F</option>
        </select>
    </div>
    <div class='grades'>
        <script>
            var e = document.getElementById("GradingScale");
            var scale = e.options[e.selectedIndex].value;

            if (scale = 2) {
                document.write("<p>Grading Scale:</p><br />");
                document.write("A: <input type='text' name='grade-a'><br />");
                document.write("B: <input type='text' name='grade-b'><br />");
                document.write("C: <input type='text' name='grade-c'><br />");
                document.write("D: <input type='text' name='grade-d'><br />");
                document.write("F: <input type='text' name='grade-f'><br />");
            } else if (scale = 1) {
                document.write("<p>Grading Scale:</p><br />");
                document.write("A: <input type='text' name='grade-a'><br />");
                document.write("A-: <input type='text' name='grade-a-'><br />");
                document.write("B+: <input type='text' name='grade-b+'><br />");
                document.write("B: <input type='text' name='grade-b'><br />");
                document.write("B-: <input type='text' name='grade-b-'><br />");
                document.write("C+: <input type='text' name='grade-c+'><br />");
                document.write("C: <input type='text' name='grade-c'><br />");
                document.write("C-: <input type='text' name='grade-c-'><br />");
                document.write("D+: <input type='text' name='grade-d+'><br />");
                document.write("D: <input type='text' name='grade-d'><br />");
                document.write("D-: <input type='text' name='grade-d-'><br />");
                document.write("F: <input type='text' name='grade-f'><br />");
            }
        </script>
    </div>
    <div class="row">
        <input type="submit" value="Add Class">
    </div>
</form>

Answer 1

首先，您应该查看Ashwin提供的建议。

您可以修改当前的代码，如下所示。（Demo）

JS更改

我已将整个脚本移动到函数scaleChange中。这样可以让您在更改选项时更轻松地调用脚本。
避免使用document.write行，因为重新调用页面时它们不是一个好习惯。
=是赋值运算符，而不是比较运算符。您应该在If / Else-If语句中使用==或===来比较这些值。
我添加了window.onload行，根据您下拉列表的默认选定值填充grades div。
将修改后的代码放入<script>代码中，并将其放在<head>代码中。

HTML更改

我在您的select标记中添加了onChange属性。这将使所选选项更改时调用scaleChange函数。
我通过向其添加selected属性，将第一个选项作为默认选项。

JS代码

function scaleChange() {
    var e = document.getElementById("GradingScale");
    var scale = e.options[e.selectedIndex].value;
    var gradeDiv = document.getElementsByClassName("grades")[0];
    if (scale == 2) {
        gradeDiv.innerHTML = "<p>Grading Scale:</p><br />";
        gradeDiv.innerHTML += "A: <input type='text' name='grade-a'><br />";
        gradeDiv.innerHTML += "B: <input type='text' name='grade-b'><br />";
        gradeDiv.innerHTML += "C: <input type='text' name='grade-c'><br />";
        gradeDiv.innerHTML += "D: <input type='text' name='grade-d'><br />";
        gradeDiv.innerHTML += "F: <input type='text' name='grade-f'><br />";
    } else if (scale == 1) {
        gradeDiv.innerHTML = "<p>Grading Scale:</p><br />";
        gradeDiv.innerHTML += "A: <input type='text' name='grade-a'><br />";
        gradeDiv.innerHTML += "A-: <input type='text' name='grade-a-'><br />";
        gradeDiv.innerHTML += "B+: <input type='text' name='grade-b+'><br />";
        gradeDiv.innerHTML += "B: <input type='text' name='grade-b'><br />";
        gradeDiv.innerHTML += "B-: <input type='text' name='grade-b-'><br />";
        gradeDiv.innerHTML += "C+: <input type='text' name='grade-c+'><br />";
        gradeDiv.innerHTML += "C: <input type='text' name='grade-c'><br />";
        gradeDiv.innerHTML += "C-: <input type='text' name='grade-c-'><br />";
        gradeDiv.innerHTML += "D+: <input type='text' name='grade-d+'><br />";
        gradeDiv.innerHTML += "D: <input type='text' name='grade-d'><br />";
        gradeDiv.innerHTML += "D-: <input type='text' name='grade-d-'><br />";
        gradeDiv.innerHTML += "F: <input type='text' name='grade-f'><br />";
    }
}

window.onload = scaleChange;

HTML代码（仅限select代码）

    <select id="GradingScale" name="GradingScale" aria-labelledby="GradingScale-ariaLabel" 
            class="required" title="Grading Scale:. This is a required field" 
            onChange='scaleChange();'>
        <option value="1" selected>A,A-,B+,B,B-,C+,C,C-,D+,D,D-,F</option>
        <option value="2">A,B,C,D,F</option>
    </select>

下拉菜单和javascript表单更改

1 个答案: