Question

我试图通过显示两个下拉菜单的值来显示评论表。当我有一个下拉菜单（正，负等）可以正常工作时，但是当我引入另一个下拉菜单（食物，饮料等）时，则不起作用。它仅在我更改第一个下拉菜单和第二个下拉菜单时有效，但是如果我保持第一个下拉菜单不变，则无法正常工作

我尝试通过在第二个下拉菜单中添加onchange方法。我刚开始使用Javascript，所以对尝试什么知之甚少。

function printResult(form) {
  var output = {
    {
      output | safe
    }
  };
  var sel = form.list;
  var sel2 = form.list2;
  var selectedVal = sel.options[sel.selectedIndex].value;
  var selectedVal2 = sel2.options[sel.selectedIndex].value;
  //document.getElementById("showResult").innerText = "Your number is: " + selectedVal;
  //console.log(output);
  document.getElementById("showResult").innerText = "Your number is: " + selectedVal2;
}

<form action="dropdown" onSubmit="return printResult(this);">
  <label for="sentiment">Sentiment</label>
  <div class="styled-select blue semi-square">
    <select name="list">
      <option value="all">All</option>
      <option value="positive">Positive</option>
      <option value="negative">Negative</option>
      <option value="neutral">Neutral</option>
    </select>
  </div>
  <div>
    <select name="list2" onChange="printResult()">
      <option value="menu">Menu Range</option>
      <option value="food">Food</option>
      <option value="drinks">Drinks</option>
      <option value="desserts">Desserts</option>
    </select>
  </div>
  <input type="submit" value="Filter">
  <span id="showResult"></span>
</form>

Answer 1

您还需要在更改时通过表单，并返回false来不提交表单：

function printResult(form) {
  var sel = form.list;
  var sel2 = form.list2;
  var selectedVal = sel.value;
  var selectedVal2 = sel2.value;
  document.getElementById("showResult").innerText = "Your number is: " + selectedVal2;
  return false;
}

<form action="dropdown" onSubmit="return printResult(this);">
  <label for="sentiment">Sentiment</label>
  <div class="styled-select blue semi-square">
    <select name="list">
      <option value="all">All</option>
      <option value="positive">Positive</option>
      <option value="negative">Negative</option>
      <option value="neutral">Neutral</option>
    </select>
  </div>
  <div>
    <select name="list2" onChange="printResult(this.form)">
      <option value="menu">Menu Range</option>
      <option value="food">Food</option>
      <option value="drinks">Drinks</option>
      <option value="desserts">Desserts</option>
    </select>
  </div>
  <input type="submit" value="Filter">
  <span id="showResult"></span>
</form>

也许您想要这个

window.addEventListener("load", function() {
  document.getElementById("form1").addEventListener("submit", function(e) {
    e.preventDefault(); // stop submission
    var sel = this.list;
    var sel2 = this.list2;
    var selectedVal = sel.value;
    var selectedVal2 = sel2.value;
    document.getElementById("showResult").innerText = (selectedVal && selectedVal2) ? selectedVal + ":" + selectedVal2 : "Please select both";
  });
});

<form action="dropdown" id="form1">
  <label for="sentiment">Sentiment</label>
  <div class="styled-select blue semi-square">
    <select name="list">
      <option value="">All</option>
      <option value="positive">Positive</option>
      <option value="negative">Negative</option>
      <option value="neutral">Neutral</option>
    </select>
  </div>
  <div>
    <select name="list2">
      <option value="">Menu Range</option>
      <option value="food">Food</option>
      <option value="drinks">Drinks</option>
      <option value="desserts">Desserts</option>
    </select>
  </div>
  <input type="submit" value="Filter">
  <span id="showResult"></span>
</form>

如果我不更改第一个下拉列表，则第二个下拉列表值不变

1 个答案: