jQuery Plugin - multiple instances with different options

I’m somewhat new to jQuery and writing jQuery plugins, but I’m trying to find a way to be able to have seperate instances of a jQuery plugin with different options.

So far, the tutorials I’ve come across can allow multiple instaces, but the options are not independent.

This is the framework I’ve constructed:


	$.fn.myplugin = function(options){

		var defaults = {
			myval: 1,
			mycolor: 'blue',
			storeValue: '#myInput'
		settings = $.extend({}, defaults, options);

		return this.each(function(){

		function doSomething(){


And the different instances:

$('button1').myplugin({storeValue: '#textbox1', mycolor: 'red'});
$('button2').myplugin({storeValue: '#textbox2', mycolor: 'green'});
$('button3').myplugin({storeValue: '#textbox3', mycolor: 'yellow'});

As it stands, if button1 is clicked, all three textboxes would get the value of “red”. If button2 is clicked, all three textboxes would get the value of “green”. And so on.

How can I get button1 to set only texbox1, and button2 to only set textbox2, etc.?

you can save your settings in the data of the element (jquery data function) and restore it in doSomething function to get values independently for each element

Where would I store the data? within the for-each, or outside?

How would I access it from within the for-each, as well as a function like “doSomething”?

actually, I put your code in test page, and it worked for me as you probably want, on each button only one input get value ‘red’ or others.
Do you have a test page, so I can see what you get?

Well, I put the code above in a test page, and it partially worked. The right values went to the right places, but they only flashed quick and didn’t stay in the textbox (for whatever reason):


Here’s the actual plugin I was working on. You’ll notice that there are 3 buttons to activate the plugin. You’re supposed to be able to click a button, select a time, and the selected time will be stored in a corresponding hidden input and displayed within a corresponding div.

The problem is that when a time is selected, the selected time is display in all the divs and stored in all the hidden inputs.


on first test page the text does not stay in text box because the page is reloading on default click because of form submit. To prevent default click action on button you should put return: false at the end of the click function


	return: false;

About the second link, is it the same script as in first one? or it’s different plugin?

in previous post code example “return: false;” should be “return false;”

Interesting…I didn’t use the return on the timepicker plugin, so I looked to see what was different about the two sets of code. In the timerpicker plugin, I specified the button element as type=“button”. I didn’t do that for test.htm. Oops :slight_smile:

I uploaded the corrected code for test.htm

Any ideas on the timepicker plugin?