如何让Javascript根据HTML表单值显示特定数据

Question

我有一个 html 表单，其中包含四个名称的下拉列表。

    window.onload = function(){
        document.getElementById("submit").onclick = showStudents;
    }

    function showStudents(){
        if(document.getElementById("mary jones").value == "mary jones"){
            document.getElementById("students").innerHTML = "Mary Jones";
        }
        else if(document.getElementById("jane doe").value == "jane doe"){
            document.getElementById("students").innerHTML = "Jane Doe";
        }
        else if(document.getElementById("henry miller").value == "henry miller"){
            document.getElementById("students").innerHTML = "Henry Miller";
        }
        else if(document.getElementById("john smith").value == "john smith"){
            document.getElementById("students").innerHTML = "John Smith";
        }
    }

<div id="students">
<form id="getStudent" action="" method="GET">
    <select name="students">
        <option value="john smith" id="john smith">John Smith</option>
        <option value="jane doe" id="jane doe">Jane Doe</option>
        <option value="henry miller" id="henry miller">Henry Miller</option>
        <option value="mary jones" id="mary jones">Mary Jones</option>
    </select>
    <br><br>
    <input id="submit" type="submit">
</form>

当我点击提交时，调用了一个 Javascript 函数，我想显示我选择的学生的姓名，但它只显示第一个 if 语句的结果。我的想法是我需要将表单数据的值传递给函数，但不知道该怎么做。这是我想出的javascript代码。

Answer 1

您需要使用选定的选项 - 目前，它只会将其设置为“Mary Jones”，因为<option id="mary jones" value="mary jones"> 的值始终是“Mary Jones”。使用<select> 元素的.value 属性获取所选选项的值：

function showStudents() {
    var selected = document.getElementById("getStudent")["students"].value;
    var output = document.getElementById("students");
    if (selected == "mary jones") {
        output.innerHTML = "Mary Jones";
    } else if (selected == "jane doe") {
        output.innerHTML = "Jane Doe";
    } else if (selected == "henry miller") {
        output.innerHTML = "Henry Miller";
    } else {
        output.innerHTML = "John Smith";
    }
}

另外请记住，ID 名称中不能有空格 - 因此您的 <option>s 应该如下所示：

<option value="mary jones" id="maryJones">Mary Jones</option>

Answer 2

可以从options中获取选中的option为select，然后显示文字内容。

window.onload = function() {
  document.getElementById("submit").onclick = showStudents;
}

function showStudents( e ) {
  e.preventDefault();
  var selectField = document.querySelector("select");
  var displayText = selectField.options[ selectField.selectedIndex ].innerText;
  document.getElementById("students").innerText = displayText;
}

<div id="students"></div>
<form id="getStudent" action="" method="GET">
  <select name="students">
    <option value="john smith" id="john smith">John Smith</option>
    <option value="jane doe" id="jane doe">Jane Doe</option>
    <option value="henry miller" id="henry miller">Henry Miller</option>
    <option value="mary jones" id="mary jones">Mary Jones</option>
  </select>
  <br><br>
  <input id="submit" type="submit">
</form>

Answer 3

您的代码存在许多问题：

第一：避免为不同的元素提供重复的 ID。 ID 在所有 HTML 中应该/必须是唯一的。任何两个元素都不应具有相同的 ID。因为如果你这样做，如果你打电话给.getElementById()，你会得到意想不到的结果。

第二：没有必要给<option>元素提供id，除非你真的必须这样做。在您的情况下，这样做没有任何好处。

第三：即使你需要为<option>元素分配不同的ID，也要避免在id字符串中出现空格，因为那样也会导致不良结果。

第三：如果您只想打印选定的值，则不需要到处都使用 if-then 语句来检查每个可能的值。仅当您将以不同方式处理每种情况时才使用 if-then。在您的情况下，switch 语句将使您的代码更具可读性和更短。

我对您的代码进行了一些更改，以反映我上面提到的几点。

window.onload = function() {
  document.getElementById("submit").onclick = showStudents;
}

function showStudents() {

  var n = document.getElementById("sel_students");
  var name = n.options[n.selectedIndex].value;
  var output = document.getElementById("div_students");

  output.innerHTML = name;

  switch (name) {
    case "mary jones":
      output.innerHTML += " <br> Hi Mary..";
      break;
    case "jane doe":
      output.innerHTML += " <br> Good bye Jane";
      break;
    case "henry miller":
      output.innerHTML += "<br> Good afternoon";
      break;
    case "john smith":
      output.innerHTML += "<br> no pokahontis here";
      break;
  }


}

<div id="div_students">
  <form id="form_students" action="" method="GET">
    <select name="students" id="sel_students">
      <option value="john smith">John Smith</option>
      <option value="jane doe">Jane Doe</option>
      <option value="henry miller">Henry Miller</option>
      <option value="mary jones">Mary Jones</option>
    </select>
    <br><br>
    <input id="submit" type="submit">
  </form>
</div>

Answer 4

请尝试这样做

    window.onload = function(){
        document.getElementById("submit").onclick = showStudents;
    }

    function showStudents(){
        document.getElementById("students").innerHTML = document.getElementById("student-list").value;
    }

<div id="students">
<form id="getStudent" action="" method="GET">
    <select name="students" id="student-list">
        <option value="john smith" id="john smith">John Smith</option>
        <option value="jane doe" id="jane doe">Jane Doe</option>
        <option value="henry miller" id="henry miller">Henry Miller</option>
        <option value="mary jones" id="mary jones">Mary Jones</option>
    </select>
    <br><br>
    <input id="submit" type="submit">
</form>

Answer 5

你为什么不用jquery？

通过id获取它

var value = $('select#dropDownId option:selected').val();

Answer 6

<div id="students">
<form id="getStudent" action="" method="GET">
    <select name="students" id="students_value">
        <option value="john smith">John Smith</option>
        <option value="jane doe">Jane Doe</option>
        <option value="henry miller">Henry Miller</option>
        <option value="mary jones">Mary Jones</option>
    </select>
    <br><br>
    <input id="submit" type="submit">
</form>

function showStudents(){
    var selected = document.getElementById("students_value");
    document.getElementById("students").innerHTML = selected;
}