[jQuery] Re: TexoTela select box manipulation modification
This should work:
$.fn.moveOptions = function(to, which)
{
this.copyOptions(to, which);
if(which == all)
{
this.find(option).remove().end();
}
else
{
this.find([EMAIL PROTECTED]).remove().end();
}
return this;
}
On Jan 16, 11:03 pm, codecowboy [EMAIL PROTECTED] wrote:
Hi Guys,
I am trying to add a function to theTexoTelaselect box manipulation
plug-in (http://www.texotela.co.uk/code/jquery/select/). I am trying
to add a function called moveOptions() that will function like a cut
paste from one text box to another. There is already a function
called copyOptions() that copies a selected value from one select box
to another. I copied the code from copyOptions() to my new function
moveOptions() to modify. I figure that the only change would be to
remove the selected option from the 1st select box after adding it to
the 2nd select box. The concept is simple but my code is yielded
strange results. The functionality breaks down when you try to copy
multiple options at once. I am relatively new to jquery so I'm hoping
that it is something obvious. Any help would be greatly appreciated.
Thank you in advance.
You can test out the code
here:http://www.digital-magic.biz/guy/cake_1_2_blog_tutorial/blog_wizard/f
Here is my function, I commented out all the different things that I
have done in an attempt to make it work:
/**
* Move options to another select (functions like cut and paste)
*
* @name moveOptions
* @author Sam Collett (http://www.texotela.co.uk)
* @type jQuery
* @paramString to Element to move to
* @paramString which (optional) Specifies which options should
be copied - 'all' or 'selected'. Default is 'selected'
* @example $(#myselect).moveOptions(#myselect2); // copy
selected options from 'myselect' to 'myselect2'
* @example $(#myselect).moveOptions(#myselect2,selected); //
same as above
* @example $(#myselect).moveOptions(#myselect2,all); // copy
all options from 'myselect' to 'myselect2'
*
*/
$.fn.moveOptions = function(to, which)
{
var w = which || selected;
if($(to).size() == 0) return this;
this.each(
function()
{
if(this.nodeName.toLowerCase() != select) return
this;
// get options
var o = this.options;
// get number of options
var oL = o.length;
for(var i = 0; ioL; i++)
{
alert(o[i].value + -- + o[i].text + -- +
o[i].selected);
if(w == all || (w == selected
o[i].selected))
{
//alert(1 + o[i].text + o[i].value);
//alert(o.toString());
$(to).addOption(o[i].value,
o[i].text);
$(this).removeOption(o[i].value);
//$(this).remove(o[i].value);
//this.remove(o[i].value);
//alert(2 + o[i].text + o[i].value);
}
//$(this).removeOption(o[i].value, true);
}
}
);
return this;
};
[jQuery] Re: TexoTela select box manipulation modification
Thank you very much. That worked. It would be great if you had the
time to tell me what was wrong with my original code because JS is
something that i am not so familiar with.
On Jan 17, 7:25 am, Sam Collett [EMAIL PROTECTED] wrote:
This should work:
$.fn.moveOptions = function(to, which)
{
this.copyOptions(to, which);
if(which == all)
{
this.find(option).remove().end();
}
else
{
this.find([EMAIL PROTECTED]).remove().end();
}
return this;
}
On Jan 16, 11:03 pm,codecowboy[EMAIL PROTECTED] wrote:
Hi Guys,
I am trying to add a function to theTexoTelaselect box manipulation
plug-in (http://www.texotela.co.uk/code/jquery/select/). I am trying
to add a function called moveOptions() that will function like a cut
paste from one text box to another. There is already a function
called copyOptions() that copies a selected value from one select box
to another. I copied the code from copyOptions() to my new function
moveOptions() to modify. I figure that the only change would be to
remove the selected option from the 1st select box after adding it to
the 2nd select box. The concept is simple but my code is yielded
strange results. The functionality breaks down when you try to copy
multiple options at once. I am relatively new to jquery so I'm hoping
that it is something obvious. Any help would be greatly appreciated.
Thank you in advance.
You can test out the code
here:http://www.digital-magic.biz/guy/cake_1_2_blog_tutorial/blog_wizard/f
Here is my function, I commented out all the different things that I
have done in an attempt to make it work:
/**
* Move options to another select (functions like cut and paste)
*
* @name moveOptions
* @author Sam Collett (http://www.texotela.co.uk)
* @type jQuery
* @paramString to Element to move to
* @paramString which (optional) Specifies which options should
be copied - 'all' or 'selected'. Default is 'selected'
* @example $(#myselect).moveOptions(#myselect2); // copy
selected options from 'myselect' to 'myselect2'
* @example $(#myselect).moveOptions(#myselect2,selected); //
same as above
* @example $(#myselect).moveOptions(#myselect2,all); // copy
all options from 'myselect' to 'myselect2'
*
*/
$.fn.moveOptions = function(to, which)
{
var w = which || selected;
if($(to).size() == 0) return this;
this.each(
function()
{
if(this.nodeName.toLowerCase() != select) return
this;
// get options
var o = this.options;
// get number of options
var oL = o.length;
for(var i = 0; ioL; i++)
{
alert(o[i].value + -- + o[i].text + -- +
o[i].selected);
if(w == all || (w == selected
o[i].selected))
{
//alert(1 + o[i].text + o[i].value);
//alert(o.toString());
$(to).addOption(o[i].value,
o[i].text);
$(this).removeOption(o[i].value);
//$(this).remove(o[i].value);
//this.remove(o[i].value);
//alert(2 + o[i].text + o[i].value);
}
//$(this).removeOption(o[i].value, true);
}
}
);
return this;
};
[jQuery] Re: TexoTela select box manipulation modification
I think it may be because when you remove an option the total number
of options is decreased, so you never get through all of them.
Start at the last option and then go back, so instead of:
for(var i = 0; ioL; i++)
Maybe (untested):
for(var i = oL; i0; i--)
On Jan 17, 3:44 pm, codecowboy [EMAIL PROTECTED] wrote:
Thank you very much. That worked. It would be great if you had the
time to tell me what was wrong with my original code because JS is
something that i am not so familiar with.
On Jan 17, 7:25 am, Sam Collett [EMAIL PROTECTED] wrote:
This should work:
$.fn.moveOptions = function(to, which)
{
this.copyOptions(to, which);
if(which == all)
{
this.find(option).remove().end();
}
else
{
this.find([EMAIL PROTECTED]).remove().end();
}
return this;
}
On Jan 16, 11:03 pm,codecowboy[EMAIL PROTECTED] wrote:
Hi Guys,
I am trying to add a function to theTexoTelaselect box manipulation
plug-in (http://www.texotela.co.uk/code/jquery/select/). I am trying
to add a function called moveOptions() that will function like a cut
paste from one text box to another. There is already a function
called copyOptions() that copies a selected value from one select box
to another. I copied the code from copyOptions() to my new function
moveOptions() to modify. I figure that the only change would be to
remove the selected option from the 1st select box after adding it to
the 2nd select box. The concept is simple but my code is yielded
strange results. The functionality breaks down when you try to copy
multiple options at once. I am relatively new to jquery so I'm hoping
that it is something obvious. Any help would be greatly appreciated.
Thank you in advance.
You can test out the code
here:http://www.digital-magic.biz/guy/cake_1_2_blog_tutorial/blog_wizard/f
Here is my function, I commented out all the different things that I
have done in an attempt to make it work:
/**
* Move options to another select (functions like cut and paste)
*
* @name moveOptions
* @author Sam Collett (http://www.texotela.co.uk)
* @type jQuery
* @paramString to Element to move to
* @paramString which (optional) Specifies which options should
be copied - 'all' or 'selected'. Default is 'selected'
* @example $(#myselect).moveOptions(#myselect2); // copy
selected options from 'myselect' to 'myselect2'
* @example $(#myselect).moveOptions(#myselect2,selected); //
same as above
* @example $(#myselect).moveOptions(#myselect2,all); // copy
all options from 'myselect' to 'myselect2'
*
*/
$.fn.moveOptions = function(to, which)
{
var w = which || selected;
if($(to).size() == 0) return this;
this.each(
function()
{
if(this.nodeName.toLowerCase() != select)
return this;
// get options
var o = this.options;
// get number of options
var oL = o.length;
for(var i = 0; ioL; i++)
{
alert(o[i].value + -- + o[i].text + -- +
o[i].selected);
if(w == all || (w == selected
o[i].selected))
{
//alert(1 + o[i].text + o[i].value);
//alert(o.toString());
$(to).addOption(o[i].value,
o[i].text);
$(this).removeOption(o[i].value);
//$(this).remove(o[i].value);
//this.remove(o[i].value);
//alert(2 + o[i].text + o[i].value);
}
//$(this).removeOption(o[i].value, true);
}
}
);
return this;
};
[jQuery] Re: TexoTela select box manipulation modification
Hi Sam,
Will you add add that move function to your plugin? The reason I ask
is so that I don't have to use my own version of the plugin.
Thank you,
CodeCowboy
On Jan 17, 11:47 am, Sam Collett [EMAIL PROTECTED] wrote:
I think it may be because when you remove an option the total number
of options is decreased, so you never get through all of them.
Start at the last option and then go back, so instead of:
for(var i = 0; ioL; i++)
Maybe (untested):
for(var i = oL; i0; i--)
On Jan 17, 3:44 pm, codecowboy [EMAIL PROTECTED] wrote:
Thank you very much. That worked. It would be great if you had the
time to tell me what was wrong with my original code because JS is
something that i am not so familiar with.
On Jan 17, 7:25 am, Sam Collett [EMAIL PROTECTED] wrote:
This should work:
$.fn.moveOptions = function(to, which)
{
this.copyOptions(to, which);
if(which == all)
{
this.find(option).remove().end();
}
else
{
this.find([EMAIL PROTECTED]).remove().end();
}
return this;
}
On Jan 16, 11:03 pm,codecowboy[EMAIL PROTECTED] wrote:
Hi Guys,
I am trying to add a function to theTexoTelaselect box manipulation
plug-in (http://www.texotela.co.uk/code/jquery/select/). I am trying
to add a function called moveOptions() that will function like a cut
paste from one text box to another. There is already a function
called copyOptions() that copies a selected value from one select box
to another. I copied the code from copyOptions() to my new function
moveOptions() to modify. I figure that the only change would be to
remove the selected option from the 1st select box after adding it to
the 2nd select box. The concept is simple but my code is yielded
strange results. The functionality breaks down when you try to copy
multiple options at once. I am relatively new to jquery so I'm hoping
that it is something obvious. Any help would be greatly appreciated.
Thank you in advance.
You can test out the code
here:http://www.digital-magic.biz/guy/cake_1_2_blog_tutorial/blog_wizard/f
Here is my function, I commented out all the different things that I
have done in an attempt to make it work:
/**
* Move options to another select (functions like cut and paste)
*
* @name moveOptions
* @author Sam Collett (http://www.texotela.co.uk)
* @type jQuery
* @paramString to Element to move to
* @paramString which (optional) Specifies which options should
be copied - 'all' or 'selected'. Default is 'selected'
* @example $(#myselect).moveOptions(#myselect2); // copy
selected options from 'myselect' to 'myselect2'
* @example $(#myselect).moveOptions(#myselect2,selected); //
same as above
* @example $(#myselect).moveOptions(#myselect2,all); // copy
all options from 'myselect' to 'myselect2'
*
*/
$.fn.moveOptions = function(to, which)
{
var w = which || selected;
if($(to).size() == 0) return this;
this.each(
function()
{
if(this.nodeName.toLowerCase() != select)
return this;
// get options
var o = this.options;
// get number of options
var oL = o.length;
for(var i = 0; ioL; i++)
{
alert(o[i].value + -- + o[i].text + -- +
o[i].selected);
if(w == all || (w == selected
o[i].selected))
{
//alert(1 + o[i].text + o[i].value);
//alert(o.toString());
$(to).addOption(o[i].value,
o[i].text);
$(this).removeOption(o[i].value);
//$(this).remove(o[i].value);
//this.remove(o[i].value);
//alert(2 + o[i].text + o[i].value);
}
//$(this).removeOption(o[i].value, true);
}
}
);
return this;
};
[jQuery] Re: TexoTela select box manipulation modification
I don't know if you are familiar with frameworks like RoR or CakePHP,
but they have classes called helpers. Both frameworks have a
prototype/scriptaculous helper built in to them. I wanted to build a
helper for manipulating select boxes on top of your jquery plugin.
The moveOptions function is critical for what I am trying to do. I
can have people download my modified version of your plugin but I
would rather just direct them to your site so that if you ever modify
the plugin that they can just download it again from your site without
worrying about losing the moveOptions functionality. Sorry to use the
google group to ask you but I tried your gmail account today and I
wasn't sure if you checked it or not.
Thank you,
CodeCowboy
On Jan 17, 2:33 pm, codecowboy [EMAIL PROTECTED] wrote:
Hi Sam,
Will you add add that move function to your plugin? The reason I ask
is so that I don't have to use my own version of the plugin.
Thank you,
CodeCowboy
On Jan 17, 11:47 am, Sam Collett [EMAIL PROTECTED] wrote:
I think it may be because when you remove an option the total number
of options is decreased, so you never get through all of them.
Start at the last option and then go back, so instead of:
for(var i = 0; ioL; i++)
Maybe (untested):
for(var i = oL; i0; i--)
On Jan 17, 3:44 pm,codecowboy[EMAIL PROTECTED] wrote:
Thank you very much. That worked. It would be great if you had the
time to tell me what was wrong with my original code because JS is
something that i am not so familiar with.
On Jan 17, 7:25 am, Sam Collett [EMAIL PROTECTED] wrote:
This should work:
$.fn.moveOptions = function(to, which)
{
this.copyOptions(to, which);
if(which == all)
{
this.find(option).remove().end();
}
else
{
this.find([EMAIL PROTECTED]).remove().end();
}
return this;
}
On Jan 16, 11:03 pm,codecowboy[EMAIL PROTECTED] wrote:
Hi Guys,
I am trying to add a function to theTexoTelaselect box manipulation
plug-in (http://www.texotela.co.uk/code/jquery/select/). I am trying
to add a function called moveOptions() that will function like a cut
paste from one text box to another. There is already a function
called copyOptions() that copies a selected value from one select box
to another. I copied the code from copyOptions() to my new function
moveOptions() to modify. I figure that the only change would be to
remove the selected option from the 1st select box after adding it to
the 2nd select box. The concept is simple but my code is yielded
strange results. The functionality breaks down when you try to copy
multiple options at once. I am relatively new to jquery so I'm hoping
that it is something obvious. Any help would be greatly appreciated.
Thank you in advance.
You can test out the code
here:http://www.digital-magic.biz/guy/cake_1_2_blog_tutorial/blog_wizard/f
Here is my function, I commented out all the different things that I
have done in an attempt to make it work:
/**
* Move options to another select (functions like cut and paste)
*
* @name moveOptions
* @author Sam Collett (http://www.texotela.co.uk)
* @type jQuery
* @paramString to Element to move to
* @paramString which (optional) Specifies which options should
be copied - 'all' or 'selected'. Default is 'selected'
* @example $(#myselect).moveOptions(#myselect2); // copy
selected options from 'myselect' to 'myselect2'
* @example $(#myselect).moveOptions(#myselect2,selected); //
same as above
* @example $(#myselect).moveOptions(#myselect2,all); // copy
all options from 'myselect' to 'myselect2'
*
*/
$.fn.moveOptions = function(to, which)
{
var w = which || selected;
if($(to).size() == 0) return this;
this.each(
function()
{
if(this.nodeName.toLowerCase() != select)
return this;
// get options
var o = this.options;
// get number of options
var oL = o.length;
for(var i = 0; ioL; i++)
{
alert(o[i].value + -- + o[i].text + -- +
o[i].selected);
if(w == all || (w ==
selected o[i].selected))
{
//alert(1 + o[i].text + o[i].value);
//alert(o.toString());
$(to).addOption(o[i].value,
o[i].text);
$(this).removeOption(o[i].value);
