从select html标记中选择的值在javascript if / else语句中未产生正确的结果

Question

** Edited: Thank you for your initial responses! **编辑：感谢您的初步答复！ After going through to build on my initial code I am at another roadblock. 在构建完我的初始代码之后，我遇到了另一个障碍。 I am trying to allow the 'change' for all my selectors, but now it will update in my JS. 我正在尝试为所有选择器允许“更改”，但是现在它将在我的JS中更新。 Also, prior to adding the doStuff(document.querySelectorAll()); 另外，在添加doStuff（document.querySelectorAll（））之前； I was using document.getElementById().addEventListener('change'), which was allowing my if/else statement to run, but when trying to write it to the page it deleted out my html. 我正在使用document.getElementById（）。addEventListener（'change'），它允许我的if / else语句运行，但是当尝试将其写入页面时，它删除了我的html。 I do not want that to happen as I would like it to either show after I run the function at the bottom if I want to update a selector or auto update as I go down and update my selectors. 我不希望发生这种情况，因为我想在底部运行该功能后显示该信息（如果我想更新选择器），或者在我向下并更新选择器时自动更新。 Once again I am grateful for the help. 我再次感谢您的帮助。

I am new to coding so this my not be the prettiest code, but I am trying to learn. 我是编码新手，所以这并不是最漂亮的代码，但是我正在尝试学习。

My HTML code is as follows: 我的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>

My JavaScript is as follows: 我的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

Add an on change event to your select element: 将更改事件添加到您的选择元素：

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

Then define the function being called 然后定义要调用的函数

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

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

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

One problem this way is you have to set an on change event for each select element in your html. 这种方式的一个问题是，您必须为html中的每个select元素设置一个on change事件。 If using JQuery: 如果使用JQuery：

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

Answer 2

Probably you're defining your dropDown1 variable only once (maybe outside the callback function you pass to the event handler), and then it will never get updated. 可能您只定义一次dropDown1变量（可能在传递给事件处理程序的回调函数之外），然后永远不会更新。

If you define it inside the listener, it will work, since it will be updated with the new value. 如果在侦听器中定义它，则它将起作用，因为它将使用新值进行更新。 Look below: 往下看：

 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

I think this is what you want: 我认为这是您想要的：

1) Add onchange function calls to your both drop-down selects. 1）将onchange函数调用添加到两个下拉选择中。 Along with retrieving the value during select. 以及在选择过程中检索值。

2) Add two functions for both the drop-down's in your JavaScript. 2）为JavaScript中的两个下拉菜单添加两个函数。

Working : Demo 工作：演示

 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