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元素中添加一个on change事件：

<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变量（可能在您传递给事件处理程序的回调函数之外），然后它永远不会更新。

如果在侦听器中定义它，它将起作用，因为它将使用新值更新。看下面：

＆＃13;

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...");
  };
});

＆＃13;

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

＆＃13;

Answer 3

我认为这就是你想要的：

1）将onchange个函数调用添加到您的两个下拉选项中。在select期间检索值。

2）为JavaScript中的下拉列表添加两个函数。

Working : Demo

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: