0

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?

1
  • if you can check in firebug/inspect tool of browser.It shows element not defined. Jul 28, 2014 at 4:11

7 Answers 7

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();
    });
});
6
  • 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? Jul 28, 2014 at 4:40
  • @KateTheGreat I'm not sure that you can specify the fonts of <option> elements individually like that...would something like this be useful? - jsFiddle Demo
    – nbrooks
    Jul 28, 2014 at 4:45
  • @KateTheGreat Yep it seems like setting the font of options in the dropdown isn't possible, based on this SO post
    – nbrooks
    Jul 28, 2014 at 4: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? Jul 28, 2014 at 5:15
  • You could just make the div contenteditable, and users could edit it right there. Otherwise you can get the value from on input element when it changes, and then update the text content of the <div>. The latter is more work, and maybe not as good a user-experience, but contenteditable only works in HTML5 compatible browsers.
    – nbrooks
    Jul 28, 2014 at 5:24
1

Please see edited code. I am using jQuery.

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

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

0

try this:

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

});
0

try this:

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

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

Use .each().

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

Fiddle

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!

0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.