add class to select dropdown based on value

Question

I'm trying to create a dropdown that will show google fonts for a customization website. I'm trying to apply a class to each option based on the option value. I can't just hard code it because I am working with a hosted vendor so I only have jquery/javascript abilities (otherwise I'd just add the class tag manually). Here's my HTML:

<select name="SELECT___ENG_SVC___52">
<option value="1167">Lobster</option>
<option value="1168">Shadows Into Light</option>
<option value="1169">Pacifico</option>
</select>

CSS:

.1167 {
font-size: 25px;
font-family: 'Lobster';
}

.1168 {
font-size: 25px;
font-family: 'Shadows Into Light';
}

.1169 {
font-size: 25px;
font-family: 'Shadows Into Light';
}

For my jquery/javascript, I have:

var fontname = element.options.val();
if(fontname == 1167) {
fontname.addclass(fontname.val);
}

What I'm trying to accomplish:

<select name="SELECT___ENG_SVC___52">
<option value="1167" class="1167">Lobster</option>
<option value="1168" class="1168">Shadows Into Light</option>
<option value="1169" class="1169">Pacifico</option>
</select>

fiddle: http://jsfiddle.net/sNkDW/276/

Any help would be much appreciated. Thanks in advance

UPDATE: oops, can't have class names that start with numbers. so lets make them .f1167 .f1168 and so on. can we have the jquery add an "f" in front of the option value to make it the class name?

if you can check in firebug/inspect tool of browser.It shows element not defined. — Arpit Srivastava, Jul 28 '14 at 04:11

score 3 · Accepted Answer · answered Jul 28 '14 at 04:35

3

The jQuery addClass method has an overloaded method which accepts a function as a parameter. You can leverage that to set the class for all of the elements at once:

$(function() {
    $('select[name="SELECT___ENG_SVC___52"] option').addClass(function() {
        return 'f' + $(this).val();
    });
});

answered Jul 28 '14 at 04:35

nbrooks

18,126
5
54
66

beautiful. this does what i asked in my question (add the class to an option). now, do you know why the dropdown still doesn't display the option in the font specified by the class? – KateTheGreat Jul 28 '14 at 04:40
@KateTheGreat I'm not sure that you can specify the fonts of ` – nbrooks Jul 28 '14 at 04:45
@KateTheGreat Yep it seems like setting the font of options in the dropdown isn't possible, based on [this SO post](http://stackoverflow.com/a/4673000/803925) – nbrooks Jul 28 '14 at 04:47
soooo awesome, I can't thank you enough. I don't suppose you know a way to update the text in the #sample div to text entered into an input text box? like so someone can select the font from the dropdown and then enter their text in a text box to see their text in the selected font? – KateTheGreat Jul 28 '14 at 05:15
You could just make the div [contenteditable](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable), and users could edit it right there. Otherwise you can [get the value](http://api.jquery.com/val) from on input element [when it changes](http://api.jquery.com/change), and then [update the text content](http://api.jquery.com/text) of the `
`. The latter is more work, and maybe not as good a user-experience, but `contenteditable` only works in HTML5 compatible browsers.
– nbrooks Jul 28 '14 at 05:24
(See the updated demo—double click to change the text: http://jsfiddle.net/MTtjL/2/) – nbrooks Jul 28 '14 at 05:26

score 1 · Answer 2 · answered Jul 28 '14 at 04:15

1

Please see edited code. I am using jQuery.

$("#myselect").children("option").each(function(index) {
    $(this).addClass($(this).val());
});

http://jsfiddle.net/sNkDW/279/

answered Jul 28 '14 at 04:15

AppTruck

21
2

score 0 · Answer 3 · answered Jul 28 '14 at 04:12

0

try this:

$('option').each(function(){
   var option = $(this);
   var val = option.val();
   option.addClass(val);

});

answered Jul 28 '14 at 04:12

Mauro

1,472
12
22

Shaunak D · Answer 4 · 2014-07-28T04:20:35.303

0

Your fiddle has many errors. jQuery reference was not included.

Use .each().

$('select option').each(function(){
  $(this).addClass(this.value);
});

Fiddle

edited Jul 28 '14 at 04:20

answered Jul 28 '14 at 04:15

Shaunak D

20,588
10
46
79

Saranga · Answer 5 · 2014-07-28T04:22:29.923

0

Since you have jquery, you can try this;

$( "select[name='SELECT___ENG_SVC___52'] option" ).each(function() {
    $(this).addClass(this.value);
});

http://jsfiddle.net/Rv39U/

Thanks!

edited Jul 28 '14 at 04:22

answered Jul 28 '14 at 04:16

Saranga

3,178
1
18
26

score 0 · Answer 6 · answered Jul 28 '14 at 04:17

0

try this:

var options=$("select option");
for(var i=0; i<options.length;i++){
   $(options[i]).addClass($(options[i]).val());
}

answered Jul 28 '14 at 04:17

Super Hornet

2,839
5
27
55

score 0 · Answer 7 · edited Jul 28 '14 at 04:55

Try this in your script:

$(document).ready(function () {
    $("#drd option").each(function () {
        debugger;
        $(this)[0].className = $(this)[0].value;
    });
});

and change your HTML to:

<select name="SELECT___ENG_SVC___52" id="drd">
    <option value="1167">Lobster</option>
    <option value="1168">Shadows Into Light</option>
    <option value="1169">Pacifico</option>
</select>

add class to select dropdown based on value

7 Answers7