JavaScript连接多个下拉选择

Question

Im newbie in JavaScript, so I was wondering if I have several drop down selections, how can I display a message of all selections that are made?

Eg: I have a drop down selection of colors, second with sizes, third with amount. So, I want to display a message of all the things chosen, such as: you choose "yellow", "size M", "2 pieces". Like specification of buyers choices.

I tried like this:

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

But it works only if I have one drop down, not when I have more... Thanks for help.

Answer 1

I would suggest adding a default value to the dropdowns, something like:

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

Then inside your dialog function, check the values you retreived from the dropdowns to see if they match something other than 'unselected':

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

This way you can also isolate which field hasn't been selected yet. Example:

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

Answer 2

Here is a working snippet example of the combined suggestions and edits from the Rob Brander and Scott Kaye . The gist is to have isolated code for user interface and another set of code for validation that simply checks if the answer is not the default answer.

Update

Per Rob's recommendation, I added an else condition so that the dialog() will clear out the text if the input of all 3 drop lists are invalid.

 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>