简体   繁体   中英

Multiple drop down menu using javascript?

hey guys i have created a drop down menu for colors were when the user select their favorite color and click on go it will display a message, for example if the user selects red and then selects blue and clicks on go it should display an alert "Just like the sky!" but it is not working please i need help

This is the code for the javascript

<script type="text/javascript">
 $('.go-btn').click(function analyzeColor3(myColor) {


if (myColor == "Blue" && "Red") {
alert("Just like the sky!");
    }
else if (myColor == "Green" && "Black") {
    alert("Just like shiraz!");
}
else {
    alert("Suit yourself then...");
}



});

This is the HTML code

<h3>Favorite Color</h3>
<select>
<option name="fav_color3" value="Blue"> Blue <br /></option>
<option name="fav_color3" value="Green"> Green <br /></option>
</select>

<h3>Favorite Color</h3>
<select>
<option name="fav_color3" value="Black"> Black <br /></option>
<option name="fav_color3" value="Red"> Red <br /></option>
</select>
<button class="go-btn" onclick="analyzeColor3(this.value);" >
  go</button>

Your snippet contains a lot of errors, I made a Fiddle on how it should be done, if you have any questions about it, feel free to ask.

Some errors:

  • you didn't have have a var myColor
  • you didn't have a function analyzeColor3
  • myColor == "Blue" && "Red" won't work you'll have to do it like this myColor == "Blue" && myColor == "Red"
  • you don't have to bind the onclick two times, one time is enough.

 $('.go-btn').click(function() {
   var color1 = $("#color1").val();
    var color2 = $("#color2").val();

   if (color1 == "Blue" && color2 == "Red") {
       alert("Just like the sky!");
   }
   else if (color1 == "Green" && color2 == "Black") {
       alert("Just like shiraz!");
   }
   else {
       alert("Suit yourself then...");
   }
})

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM