I'm quite new to jQuery and was wondering how i could select an options in a dropdown select menu.
To be more specific: You can select a color in the dropdown menu and when you click on the button the background color changes to that color.
Thanks in advance!
Here's the HTML:
<div id="form-box">
<h1>Funky Background Color Changer</h1>
<p>1. Choose a funky background color:
<select name="bgColor" id="">
<option value="$juicy-cyan">Juicy Cyan</option>
<option value="$purdy-purple">Purdy Purple</option>
</select>
</p>
<p>2. That's it actually! Just click the button.</p><br>
<button class="funk">Let's Funk!</button>
</div>
Add an ID to your h1 and your colors (Hex values) on the values of the selected list for example, then set the brackground when the button it's clicked:
Html
<div id="form-box">
<h1 id="h1_id">Funky Background Color Changer</h1>
<p>1. Choose a funky background color:
<select name="bgColor" id="bgColor_id">
<option value="#ff0000">Juicy Cyan</option>
<option value="#0066ff">Purdy Purple</option>
</select>
</p>
<p>2. That's it actually! Just click the button.</p><br>
<button class="funk" id="submitButton">Let's Funk!</button>
</div>
JQuery
$('#submitButton').on('click', function () {
var color = $("#bgColor_id").val();
$("#h1_id").css('background-color', color);
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments