?
Solved

Adapt jQuery Selectbox plugin to add extra class to select list

Posted on 2013-01-08
4
Medium Priority
?
868 Views
Last Modified: 2013-01-08
Hi All,

I'm using a jQuery Selectbox plugin from the following location: http://www.bulgaria-web-developers.com/projects/javascript/selectbox/

It works fine except that I would like to be able to add a class to either the <a> link  or <li> that has been chosen by the user so when the dropdown is opened again, I can have styled that <li> to look like the active selection.

So when the user clicks on a list option, either the <a> or <li> get an additional class of 'selected' or whatever which is then removed when you click on another option.

Any ideas?

Many thanks.
jquery.selectbox-0.2.zip
0
Comment
Question by:b24
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38755257
Like most "free" plugins, there does not appear to be any support.  I suggest you try to contact the author, because I doubt anyone is going to try and modify the library for you.

Cd&
0
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 2000 total points
ID: 38755282
You could try something like this. (the onOpen, and onClose you can remove if you want)


$("#selectlist").selectbox({
	onOpen: function (inst) {
		//console.log("open", inst);
	},
	onClose: function (inst) {
		//console.log("close", inst);
	},
	onChange: function (val, inst) {
		$(this).find("option").filter(":selected").addClass("selected");
	},
	effect: "slide"
});

Open in new window

0
 

Author Closing Comment

by:b24
ID: 38755545
Thanks kozaiwaniec !
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38755575
my pleasure :))
0

Featured Post

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question