Question

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

但是只有当我有一个下拉时它才有效，而不是当我有更多... 感谢帮助。

Answer 1

我建议在下拉菜单中添加默认值，例如：

<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');
}

Answer 2

以下是来自Rob Brander和Scott Kaye的综合建议和修改的工作代码示例。要点是拥有用户界面的隔离代码和另一组验证代码，只需检查答案是否不是默认答案。

<强>更新

根据Rob的建议，我添加了else条件，以便dialog()清除文本，如果所有3个删除列表的输入都无效。

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>

JavaScript连接多个下拉选项

2 个答案: