Как получить 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

Многие проблемы с вашим кодом:

Во-первых: избегайте присвоения дублирующих идентификаторов различным элементам.Идентификатор должен / должен быть уникальным во всем HTML.Никакие два элемента не должны иметь одинаковый идентификатор.Потому что если вы сделаете это, вы получите непредвиденные результаты, если позвоните .getElementById().

Секунда: нет необходимости присваивать идентификаторы элементам <option>, если только вам это не нужно.В вашем случае это не выгодно.

В-третьих: даже если вам нужно назначить разные идентификаторы элементам <option>, избегайте пробелов в строке идентификатора, поскольку это также приведет к нежелательным результатам.

В-третьих: если вы хотите распечатать только выбранное значение, вам не нужно везде использовать оператор 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 2

<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;
}

Answer 3

Почему вы не используете jquery?

получите по id

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

Answer 4

Вы можете выбрать option из options для 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 5

Вам нужно будет использовать выбранную опцию - в настоящее время она будет устанавливать только «Мэри Джонс», потому что значение <option id="mary jones" value="mary jones"> всегда будет «Мэри Джонс».Используйте свойство .value элемента <select>, чтобы получить значение выбранного параметра:

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 6

Пожалуйста, попробуйте сделать это

    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>