zeshanshani
2/15/2015 - 7:49 AM

Adding class to jQuery SelectBox selected dropdown option for styling purposes

Adding class to jQuery SelectBox selected dropdown option for styling purposes

// This script is by Zeshan Ahmed @zeshanshani
// The script will add a class of "sbActive" to the jQuery SelectBox plugin selected dropdown option for styling purpose
// Plugin URL: http://www.bulgaria-web-developers.com/projects/javascript/selectbox/

$('.sbOptions li:first-child').addClass('active');
$('.sbOptions li a').click(function() {
  var $this = $(this);
  $this.addClass('sbActive');
  $this.closest('li').siblings().children('a').removeClass('sbActive');
});
// Improved code using selectBox callback fucntions.

$("select").selectbox({
  onOpen: function(inst) {
    var $this = $(this),
        thisAnchor = $this.siblings('.sbHolder').find('.sbOptions').find('a[href="#' + $this.val() + '"]');

    thisAnchor.closest('li').addClass('active').siblings('li').removeClass('active');
  },
  onClose: function(inst) {
    var $this = $(this),
        thisAnchor = $this.siblings('.sbHolder').find('.sbOptions').find('a[href="#' + $this.val() + '"]');

    thisAnchor.closest('li').addClass('active').siblings('li').removeClass('active');
  }
});