0

我正在尝试根据下拉选择更改一些表单选项。我想我正确地编写了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>
4

1 回答 1

1

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

您可以按如下方式修改当前代码以暂时使用。（演示）

JS 更改

  1. 我已将您的整个脚本移至函数scaleChange中。这将使您在更改选项时更容易调用脚本。
  2. 避免使用document.write线条，它们不是一个好习惯，因为它们在再次调用时会重新绘制页面。
  3. =是赋值运算符而不是比较运算符。您应该在 If/Else-If 语句中使用==or来比较这些值。===
  4. 我添加了一行来根据下拉列表的默认选择值window.onload填充您的div。grades
  5. 将修改后的代码放入您的<script>标签中，并将其放在<head>标签内。

HTML 更改

  1. 我已向onChange您的选择标签添加了一个属性。这将在scaleChange更改所选选项时调用该函数。
  2. 我通过向其添加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>
于 2013-08-11T06:21:09.810 回答