How do I select a value from a drop down list in jQuery?

Question

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>

You need to bind your function to the change event of the select element. — j08691
– j08691, Commented Aug 18, 2015 at 17:37

halfer · Accepted Answer · 2020-05-15 16:18:04Z

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.

edited May 15, 2020 at 16:18

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Aug 18, 2015 at 17:38

Sushil

2,8434 gold badges23 silver badges29 bronze badges

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

6 Comments

Bre P. Over a year ago

This was perfect!! Thank you so much! :)

Sushil Over a year ago

great. please mark this as an answer if it helped you.

Bre P. Over a year ago

Just had to take out case 4 :P

Sushil Over a year ago

oh sorry about that. didn't notice it. ;)

Sushil Over a year ago

updated my answer. please accept it if it helped you.

|

PeterKA · Accepted Answer · 2015-08-18 21:06:32Z

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>

edited Aug 18, 2015 at 21:06

answered Aug 18, 2015 at 17:40

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

2 Comments

Sushil Over a year ago

your answer is the shortest and better than mine.

PeterKA Over a year ago

Would be glad to receive your vote :-) Thanks. Yours is correct too. @Sushil

Joy Biswas · Accepted Answer · 2015-08-18 17:40:34Z

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

Collectives™ on Stack Overflow

How do I select a value from a drop down list in jQuery?

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related