• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar

Creative CG

Web Design/Development Inspiration, Tips, Tutorials and Resources

  • About Us
  • Web Design Services

javascript

Dynamically Add / Remove CSS Class with jQuery

April 23, 2013 by CreativeCG

jQuery JavaScript FrameworkjQuery has built in functions designed to add and remove a CSS class or multiple CSS classes from selected elements (selectors).

.addClass() – Adds the specified class(es) to each of the set of matched elements.
The function simply adds the class, appending it to any which may already be assigned to the elements.

$("p").addClass('newClass');

More than one class may be added at a time to the set of matched elements. Each parameter must separated by a space.

$("p").addClass("newClass1 newClass2");

It is important to note that these classes will not replace existing classes. If you wish to replace the existing style you can first use the .removeClass() function or use the .attr(“class”,”newClass”) function instead.

.removeClass() – Remove a single class, multiple classes, or all classes from each element in the set of matched elements.
If no class names are specified in the parameter, all classes will be removed.

$("p").removeClass();

If a class name is included as a parameter, then only that class will be removed from the set of matched elements.

$("p").removeClass("newClass");

Both these functions can be used together in the same line as well.

$("p").removeClass("newClass1 newClass2").addClass("newClass3");

This resulting code would remove newClass1 and newClass2 as well as add newClass3.

These functions can be used with any selected element where style is valid.

Filed Under: Javascript, jQuery, Web Design Tagged With: Development, HTML, javascript, jquery, Web Design

Add/Remove options from a Select box with jQuery

January 14, 2011 by CreativeCG

Ever wanted to refresh your options in a drop down without having to refresh the screen? Here we will look at how to add and remove options from a select box using jQuery without refreshing the page.

Adding a single option via .append

A single option can be added by appending HTML to the select box. See example:

$('#optExample').append('<option value="newVal">Option Text</option>');

This added option will be the selected option; to change this remove the selected=”selected”.

Adding a single option via Javascript only

Add a single option using the newOption function. See example:

var options =  $('#optExample').attr('options');
options[options.length] = newOption('Option Text', 'newVal', true, true);

The true, true properties select the option upon creation. Remove them if you do not want the option selected when added.

Adding multiple options

Use the following to replace an existing set of options with a new set. The array could be created anyway you wish, however since we want the page to keep from refreshing either populate the list upon page load or via AJAX. We’ll use the following:

var dataArr = [{'value':'val1','text':'text1'},
               {'value':'val2','text':'text2'},
               {'value':'val3','text':'text3'},
               {'value':'val4','text':'text4'},
               {'value':'val5','text':'text5'},
               {'value':'val6','text':'text6'},
               {'value':'val7','text':'text7'}];

// Removes all options for the select box
$('#optExample option').remove();

// .each loops through the array
$.each(dataArr, function(i){
    $('#optExample').append($("<option></option>")
                    .attr("value",dataArr[i]['value'])
                    .text(dataArr[i]['text']));
});

Adding multiple options by criteria

If you want to take an array of data and populate the select box only when the criteria is met the code is similar in nature. See example:

var dataArr = [{'key':'1','value':'val1','text':'text1'},
               {'key':'1','value':'val2','text':'text2'},
               {'key':'2','value':'val3','text':'text3'},
               {'key':'2','value':'val4','text':'text4'},
               {'key':'2','value':'val5','text':'text5'},
               {'key':'3','value':'val6','text':'text6'},
               {'key':'3','value':'val7','text':'text7'}];
// Removes all options for the select box
$('#optExample option').remove();

// .each loops through the array
$.each(dataArr, function(i){
    //only append options with a "key" value of 2
    if (dataArr[i]['key'] == '2'){
        $('#optExample').append($("<option></option>")
                        .attr("value",dataArr[i]['value'])
                        .text(dataArr[i]['text']));
    }
});

A common use for something like this is where an option list is populated when another form option is selected. Based upon your page design rather than execute an AJAX call you could populate the entire array with all the options on page load. This would increase initial page weight but reduce I/O later on.

There are possibly more jQuery plugins that complete similar functionality but this is all possible with native jQuery.

Filed Under: Featured, Javascript, jQuery Tagged With: javascript, jquery

Primary Sidebar

Facebook Twitter Google+ Pin It Share GitHub RSS

Affiliates

Web Hosting 125x125 125x125 Thesis Theme for WordPress:  Options Galore and a Helpful Support Community Genesis Theme Framework for WordPress by StudioPress Dynamik Website Builder The easiest way to create a photography website. Create your site at Weebly.com!

Categories

  • Blogging
  • Featured
  • Freebies
  • Game Dev
  • General
  • Javascript
  • jQuery
  • Web Design
  • Wordpress
  • Wordpress Themes

Copyright © 2021 · Metro Pro on Genesis Framework · WordPress · Log in