JavaScript连接多个下拉选择

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>

然后在对话框函数中，检查您从下拉列表中获取的值，看是否与“ unselected”以外的值匹配：

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条件，以便在所有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>