JavaScript连接多个下拉选择

JavaScript connecting several drop down selections

本文关键字：选择 连接 JavaScript      更新时间：2023-09-26

我是JavaScript新手，所以我想知道如果我有几个下拉选择，如何显示所有选择的消息？

例如：我有一个下拉式的颜色选择，第二个是尺寸，第三个是数量。所以，我想显示所有选择的东西的信息，比如：你选择"黄色"，"M码"，"2件"。就像买家选择的规格一样。

我试过这样：

<script> 
    function dialog() {
        var color= document.getElementById ("color").value;
        var size = document.getElementById ("size").value;
        var amount= document.getElementById ("amount").value;
        document.getElementById("demo").innerHTML="You choose" +color+ "size" +size "in an amount of" +amount+;
    }
</script>

但只有当我有一个下拉菜单时，它才有效，而不是当我有更多下拉菜单时。。。谢谢你的帮助。

我建议在下拉列表中添加一个默认值，比如：

<select>
  <option value="unselected">Select a Size</option>
</select>

然后在对话框功能中，检查从下拉列表中检索到的值，看看它们是否与"未选中"以外的值匹配：

if (color != 'unselected' && size != 'unselected' && amount != 'unselected') {
  document.getElementById("demo").innerHTML="You choose" +color+ "size" +size+ "in an amount of" +amount;
}

通过这种方式，您还可以隔离尚未选择的字段。示例：

if (color == 'unselected') {
  alert('You need to select a color');
}

以下是Rob Brander和Scott Kaye的组合建议和编辑的工作片段示例。要点是为用户界面提供独立的代码，并为验证提供另一组代码，简单地检查答案是否不是默认答案。

更新

根据Rob的建议，我添加了一个else条件，这样，如果所有3个下拉列表的输入都无效，dialog()就会清除文本。

function dialog() {
  var color = " " + document.getElementById("color").value + ", ";
  var size = " " + document.getElementById("size").value + ", ";
  var amount = " " + document.getElementById("amount").value + ".";
  var defaultVal = "unselected";
  var colorDefault = document.getElementById("color").value;
  var sizeDefault = document.getElementById("size").value;
  var amountDefault = document.getElementById("amount").value;
  if (colorDefault != defaultVal && sizeDefault != defaultVal && amountDefault != defaultVal) {
    document.getElementById("demo").innerHTML = "You choose color" + color + "size" + size + "in an amount of" + amount;
  } else {
    document.getElementById("demo").innerHTML = "";
  }
}
document.getElementById("color").addEventListener("click", dialog);
document.getElementById("size").addEventListener("click", dialog);
document.getElementById("amount").addEventListener("click", dialog);
document.getElementById("color").addEventListener("mousedown", dialog);
document.getElementById("size").addEventListener("mousedown", dialog);
document.getElementById("amount").addEventListener("mousedown", dialog);
document.getElementById("color").addEventListener("mouseup", dialog);
document.getElementById("size").addEventListener("mouseup", dialog);
document.getElementById("amount").addEventListener("mouseup", dialog);
div {
  width: 80%;
  border: solid 1px #000;
  background-color: #ACE;
  height: 125px;
  margin-top: 10px;
  padding: 3px;
  font-family: arial;
}
<select id='color'>
  <option value="unselected">Color...</option>
  <option value="red">Red</option>
  <option value="blue">Blue</option>
  <option value="orange">Orange</option>
</select>
<select id='size'>
  <option value="unselected">Size...</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="32">32</option>
</select>
<select id='amount'>
  <option value="unselected">Amount...</option>
  <option value="10">10</option>
  <option value="20">20</option>
  <option value="30">30</option>
</select>
<div id='demo'></div>

相关文章：