0

I am trying to change the font of an aside, when you select the font you want to use from a drop down list.

However, the only value my code will pick up is for the first option of the list. When I click on another font, nothing happens. How do I get the other values selected? Thank you.

var fontVal = $("select option").attr("value"); alert(fontVal); function fontChoice(){	if(fontVal == "Choose"){	$('#mirror').css({"font-family":"sans-serif"});	console.log('Choose');	}else if(fontVal == "Arial"){	$('#mirror').css({"font-family":"Arial"});	console.log('Courier');	}else if(fontVal == "Times"){	$('#mirror').css({"font-family":"Times New Roman"});	console.log('Times');	}else if(fontVal == "Impact"){	$('#mirror').css({"font-family":"Impact"});	console.log('Impact');	}else if(fontVal == "Courier"){	$('#mirror').css({"font-family":"Courier"});	console.log('Courier');	}; }; fontChoice();
<aside id="mirror"> </aside> <select id="fonts">	<option value="Choose">Choose your font</option>	<option value="Arial">Arial</option>	<option value="Times">Times New Roman</option>	<option value="Impact">Impact</option>	<option value="Courier">Courier</option> </select>

Improve this question
2
  • try this fiddle jsfiddle.net/s9v4mvfv Commented Aug 18, 2015 at 17:36
  • 2
    You need to bind your function to the change event of the select element. Commented Aug 18, 2015 at 17:37

3 Answers 3

Reset to default
2

You should use the change event of the select to get the selected value.

Try this:

$(function(){ $('#fonts').on('change', function(){ switch ($(this).val()) { case 'Choose': $('#mirror').css({"font-family":"sans-serif"}); break; case 'Arial': $('#mirror').css({"font-family":"Arial"}); break; case 'Times': $('#mirror').css({"font-family":"Times New Roman"}); break; case 'Impact': $('#mirror').css({"font-family":"Impact"}); break; case 'Courier': $('#mirror').css({"font-family":"Courier"}); break; } }); });

Here's a working JS Fiddle.

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

This was perfect!! Thank you so much! :)
great. please mark this as an answer if it helped you.
Just had to take out case 4 :P
oh sorry about that. didn't notice it. ;)
updated my answer. please accept it if it helped you.
|
1

Using a switch statement looks like overkill to me. Also you have the full font names in the option elements. You can also take advantage of the ternary operator to reduce your code to one line. 

$('#fonts').on('change', function() { $('#mirror').css({ "font-family": this.value.trim() == 'Choose' ? 'sans-serif' : $('option:selected', this).text() }); });
.demo { font-size: xx-large; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>	<aside id="mirror" class="demo"> Sample Text	</aside>	<select id="fonts">	<option value="Choose">Choose your font</option>	<option value="Arial">Arial</option>	<option value="Times">Times New Roman</option>	<option value="Impact">Impact</option>	<option value="Courier">Courier</option>	</select>

Improve this answer

2 Comments

your answer is the shortest and better than mine.
Would be glad to receive your vote :-) Thanks. Yours is correct too. @Sushil
0 

function fontChoice() { var fontVal = $("select").find(':selected').val(); alert(fontVal); if (fontVal == "Choose") { $('#mirror').css({ "font-family": "sans-serif" }); console.log('Choose'); } else if (fontVal == "Arial") { $('#mirror').css({ "font-family": "Arial" }); console.log('Courier'); } else if (fontVal == "Times") { $('#mirror').css({ "font-family": "Times New Roman" }); console.log('Times'); } else if (fontVal == "Impact") { $('#mirror').css({ "font-family": "Impact" }); console.log('Impact'); } else if (fontVal == "Courier") { $('#mirror').css({ "font-family": "Courier" }); console.log('Courier'); }; };
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <aside id="mirror"> </aside> <select id="fonts" onchange="fontChoice();"> <option value="Choose">Choose your font</option> <option value="Arial">Arial</option> <option value="Times">Times New Roman</option> <option value="Impact">Impact</option> <option value="Courier">Courier</option> </select>

You should be using $("select").find(':selected').val(); Added in the select tag an onchange attribute

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.