從select html標記中選擇的值在javascript if / else語句中未產生正確的結果

Question

**編輯：感謝您的初步答復！ 在構建完我的初始代碼之后，我遇到了另一個障礙。 我正在嘗試為所有選擇器允許“更改”，但是現在它將在我的JS中更新。 另外，在添加doStuff（document.querySelectorAll（））之前； 我正在使用document.getElementById（）。addEventListener（'change'），它允許我的if / else語句運行，但是當嘗試將其寫入頁面時，它刪除了我的html。 我不希望發生這種情況，因為我想在底部運行該功能后顯示該信息（如果我想更新選擇器），或者在我向下並更新選擇器時自動更新。 我再次感謝您的幫助。

我是編碼新手，所以這並不是最漂亮的代碼，但是我正在嘗試學習。

我的HTML代碼如下：

    <body>
  <form method="POST">
    <div id="dynamicInput1">
      <ul>
        <strong>Is the individual/entire family under 30?</strong>
      </ul>
      <select id="myDropDown1">
        <option value="yes">Yes</option>
        <option value="no">No</option>
      </select>
    </div>
    <div id="dynamicInput2">
      <ul><strong>High utilizer of Healthcare? Examples:</strong>
        <li>Takes prescription drugs</li>
        <li>Goes to the doctor or specialist frequently</li>
        <li>Managing a chronic condition</li>
        <li>Or having a planned procedure</li>
      </ul>
      <select id="myDropDown2">
        <option value="yes">Yes</option>
        <option value="no">No</option>
      </select>
    </div>
  </form>
</body>

我的JavaScript如下：

    doStuff(document.querySelectorAll('myDropDown1, myDropDown2').addEventListener('change', function() {
  var dropDown1 = document.getElementById('myDropDown1').value;
  var dropDown2 = document.getElementById('myDropDown2').value;

  if(dropDown1 === 'yes') {
    alert('Holy Crap!')
  } else if(dropDown2 === 'no') {
    alert('Is this going to work?')
  } else{
    alert('WTF...')
  };
}));

Answer 1

將更改事件添加到您的選擇元素：

<select id="myDropDown1" onchange="myFunction()">

然后定義要調用的函數

function myFunction() {
  var dropDown1 = document.getElementById("myDropDown1").value;

  var dropDown2 = document.getElementById("myDropDown2").value;

  if (dropDown1 === "yes") {
        alert("Holy Crap!");
  } else {
       alert("WTF...");
  };
}

這種方式的一個問題是，您必須為html中的每個select元素設置一個on change事件。 如果使用JQuery：

$('select').change(function() {
    //Do event with $this
});

Answer 2

可能您只定義一次dropDown1變量（可能在傳遞給事件處理程序的回調函數之外），然后永遠不會更新。

如果在偵聽器中定義它，則它將起作用，因為它將使用新值進行更新。 往下看：

 document.getElementById('myDropDown1').addEventListener('change', function() { var dropDown1 = document.getElementById("myDropDown1").value; var dropDown2 = document.getElementById("myDropDown2").value; if (dropDown1 === "yes") { alert("Holy Crap!"); } else { alert("WTF..."); }; });

 <body> <form method="POST"> <div id="dynamicInput1"> <ul><strong>Is the individual/entire family under 30?</strong> </ul> <select id="myDropDown1"> <option value="yes">Yes</option> <option value="no">No</option> </select> </div> <div id="dynamicInput2"> <ul><strong> High utilizer of Healthcare? Examples:</strong> <li>Takes prescription drugs</li> <li>Goes to the doctor or specialist frequently</li> <li>Managing a chronic condition</li> <li>Or have a planned procedure</li> </ul> <br> <select id="myDropDown2"> <option value="yes">Yes</option> <option value="no">No</option> </select> </div> </form> </body>

Answer 3

我認為這是您想要的：

1）將onchange函數調用添加到兩個下拉選擇中。 以及在選擇過程中檢索值。

2）為JavaScript中的兩個下拉菜單添加兩個函數。

工作：演示

 function dropdown1(val1) { if (val1 == "yes") { alert("Holy Crap!"); } else { alert("WTF..."); } } function dropdown2(val2) { if (val2 == "yes") { alert("Holy Crap!"); } else { alert("WTF..."); } }

 <form method="POST"> <div id="dynamicInput1"> <ul><strong>Is the individual/entire family under 30?</strong> </ul> <select id="myDropDown1" onchange="dropdown1(this.value)"> <option value="yes">Yes</option> <option value="no">No</option> </select> </div> <div id="dynamicInput2"> <ul><strong> High utilizer of Healthcare? Examples:</strong> <li>Takes prescription drugs</li> <li>Goes to the doctor or specialist frequently</li> <li>Managing a chronic condition</li> <li>Or have a planned procedure</li> <ul> <br> <select id="myDropDown2" onchange="dropdown2(this.value)"> <option value="yes">Yes</option> <option value="no">No</option> </select> </div> </form>

從select html標記中選擇的值在javascript if / else語句中未產生正確的結果

問題描述

3 個解決方案

解決方案1
0 2015-10-07 21:06:34

解決方案2
0 已采納 2015-10-07 21:07:35

解決方案3
0 2015-10-07 21:12:13

從select html標記中選擇的值在javascript if / else語句中未產生正確的結果

問題描述

3 個解決方案

解決方案1 0 2015-10-07 21:06:34

解決方案2 0 已采納 2015-10-07 21:07:35

解決方案3 0 2015-10-07 21:12:13

解決方案1
0 2015-10-07 21:06:34

解決方案2
0 已采納 2015-10-07 21:07:35

解決方案3
0 2015-10-07 21:12:13