<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
		>
<channel>
	<title>Commenti a: jDoubleSelect: jQuery plugin transform one select with optgroups into two selects</title>
	<atom:link href="http://www.senamion.com/blog/2010/03/10/jdoubleselect-jquery-plugin-transform-one-select-with-optgroups-into-two-selects/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.senamion.com/blog/2010/03/10/jdoubleselect-jquery-plugin-transform-one-select-with-optgroups-into-two-selects/</link>
	<description>Senamion is a Jquery blog</description>
	<lastBuildDate>Tue, 30 Aug 2011 22:51:39 +0200</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
		<item>
		<title>Di: mark</title>
		<link>http://www.senamion.com/blog/2010/03/10/jdoubleselect-jquery-plugin-transform-one-select-with-optgroups-into-two-selects/comment-page-1/#comment-2983</link>
		<dc:creator>mark</dc:creator>
		<pubDate>Mon, 16 May 2011 18:02:49 +0000</pubDate>
		<guid isPermaLink="false">http://www.senamion.com/blog/?p=54#comment-2983</guid>
		<description>SO - i just updated things to work in jQuery 1.6.1:

&lt;pre&gt;&lt;code&gt;
/*
* jDoubleSelect jQuery plugin
*
* Copyright (c) 2010 Giovanni Casassa (senamion.com - senamion.it)
*
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* http://www.senamion.com
*
*/

(function ($) {
    jQuery.fn.jDoubleSelect = function (o) {

        o = $.extend({
            text: &quot;&quot;
        }, o);

        return this.each(function () {
            var el = $(this);
            var p = el.parent();
            var name1 = (el.attr(&#039;id&#039;) &#124;&#124; el.attr(&#039;name&#039;) &#124;&#124; el.attr(&#039;class&#039;) &#124;&#124; &#039;internalName&#039;) + &#039;_jDS&#039;;
            var name2 = name1 + &quot;_2&quot;;

            groupSel = &quot;&quot;;
            $(this).children().each(function (i) {
                // Verify disabled or selected group
                if ($(this).attr(&quot;disabled&quot;))
                    s = &quot; disabled &quot;;
                else if ($(this).find(&quot;:selected&quot;).attr(&quot;value&quot;) &#124;&#124; $(this).attr(&#039;selected&#039;)) {
                    s = &quot; selected &quot;;
                }
                else s = &quot;&quot;;

                if ($(this).attr(&quot;label&quot;))
                    groupSel += &quot;&quot; + $(this).attr(&quot;label&quot;) + &quot;&quot;;
                else
                    groupSel += &quot;&quot; + $(this).text() + &quot;&quot;;
            });
            $(this).hide().after(&quot;&quot; + groupSel + &quot;&quot;);

            $(&quot;#&quot; + name1).bind(&quot;change keyup&quot;,function () {
                $(&quot;#&quot; + name2).add($(&quot;#&quot; + name2).prev()).remove();
                var o = el.find(&quot;optgroup[label=\&quot;&quot; + $(this).val() + &quot;\&quot;]&quot;).html();
                if (o) {
                    el.next().after(&quot; &quot; + (el.attr(&quot;data-doubleSelect-innerLabel&quot;) &#124;&#124; &quot;&quot;) + &quot; &quot; + o + &quot;&quot;);
                    $(&quot;#&quot; + name2).trigger(&quot;change&quot;);
                    p.removeClass(&quot;jDoubleSelect-showing1&quot;).addClass(&quot;jDoubleSelect-showing2&quot;);
                } else {
                    el.attr(&quot;value&quot;, $(this).val());
                    p.removeClass(&quot;jDoubleSelect-showing2&quot;).addClass(&quot;jDoubleSelect-showing1&quot;);
                }
            });

            $(&quot;#&quot; + name2).live(&quot;change keyup&quot;, function () {
                el.attr(&quot;value&quot;, $(this).val());
            }).trigger(&quot;change&quot;);

            $(&quot;#&quot; + name1).trigger(&quot;change&quot;)
        });
    };
})(jQuery);
&lt;/code&gt;&lt;/pre&gt;</description>
		<content:encoded><![CDATA[<p>SO &#8211; i just updated things to work in jQuery 1.6.1:</p>
<pre><code>
/*
* jDoubleSelect jQuery plugin
*
* Copyright (c) 2010 Giovanni Casassa (senamion.com - senamion.it)
*
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* <a href="http://www.senamion.com" rel="nofollow">http://www.senamion.com</a>
*
*/

(function ($) {
    jQuery.fn.jDoubleSelect = function (o) {

        o = $.extend({
            text: ""
        }, o);

        return this.each(function () {
            var el = $(this);
            var p = el.parent();
            var name1 = (el.attr('id') || el.attr('name') || el.attr('class') || 'internalName') + '_jDS';
            var name2 = name1 + "_2";

            groupSel = "";
            $(this).children().each(function (i) {
                // Verify disabled or selected group
                if ($(this).attr("disabled"))
                    s = " disabled ";
                else if ($(this).find(":selected").attr("value") || $(this).attr('selected')) {
                    s = " selected ";
                }
                else s = "";

                if ($(this).attr("label"))
                    groupSel += "" + $(this).attr("label") + "";
                else
                    groupSel += "" + $(this).text() + "";
            });
            $(this).hide().after("" + groupSel + "");

            $("#" + name1).bind("change keyup",function () {
                $("#" + name2).add($("#" + name2).prev()).remove();
                var o = el.find("optgroup[label=\"" + $(this).val() + "\"]").html();
                if (o) {
                    el.next().after(" " + (el.attr("data-doubleSelect-innerLabel") || "") + " " + o + "");
                    $("#" + name2).trigger("change");
                    p.removeClass("jDoubleSelect-showing1").addClass("jDoubleSelect-showing2");
                } else {
                    el.attr("value", $(this).val());
                    p.removeClass("jDoubleSelect-showing2").addClass("jDoubleSelect-showing1");
                }
            });

            $("#" + name2).live("change keyup", function () {
                el.attr("value", $(this).val());
            }).trigger("change");

            $("#" + name1).trigger("change")
        });
    };
})(jQuery);
</code></pre>
]]></content:encoded>
	</item>
	<item>
		<title>Di: Mauro Zadunaisky</title>
		<link>http://www.senamion.com/blog/2010/03/10/jdoubleselect-jquery-plugin-transform-one-select-with-optgroups-into-two-selects/comment-page-1/#comment-2193</link>
		<dc:creator>Mauro Zadunaisky</dc:creator>
		<pubDate>Wed, 27 Apr 2011 17:47:44 +0000</pubDate>
		<guid isPermaLink="false">http://www.senamion.com/blog/?p=54#comment-2193</guid>
		<description>In reply to this:

`Great – but when I add a second select to my form, doubleselect takes control of that too and I get two empty dropdown boxes`

I&#039;ve fixed the code and solved that problem. You can find the complete modified script at http://codaset.com/plusglobal/browniephp/source/master/blob/webroot/js/jquery.jDoubleSelect.js

(in only added an if statement in line 39)</description>
		<content:encoded><![CDATA[<p>In reply to this:</p>
<p>`Great – but when I add a second select to my form, doubleselect takes control of that too and I get two empty dropdown boxes`</p>
<p>I&#8217;ve fixed the code and solved that problem. You can find the complete modified script at <a href="http://codaset.com/plusglobal/browniephp/source/master/blob/webroot/js/jquery.jDoubleSelect.js" rel="nofollow">http://codaset.com/plusglobal/browniephp/source/master/blob/webroot/js/jquery.jDoubleSelect.js</a></p>
<p>(in only added an if statement in line 39)</p>
]]></content:encoded>
	</item>
	<item>
		<title>Di: Paolo</title>
		<link>http://www.senamion.com/blog/2010/03/10/jdoubleselect-jquery-plugin-transform-one-select-with-optgroups-into-two-selects/comment-page-1/#comment-1791</link>
		<dc:creator>Paolo</dc:creator>
		<pubDate>Thu, 03 Feb 2011 09:26:20 +0000</pubDate>
		<guid isPermaLink="false">http://www.senamion.com/blog/?p=54#comment-1791</guid>
		<description>It might be a good idea to trigger the original element change event. 

&lt;code&gt;&lt;pre&gt;
			$(&quot;#&quot;+name2).live(&quot;change&quot;, function(){
				// THIS IS VERY VERY SLOW IN FIREFOX
				//el.val($(this).val());
				el.attr(&quot;value&quot;, $(this).val());
---&gt;			el.trigger(&quot;change&quot;);
			}).trigger(&quot;change&quot;);
&lt;/pre&gt;&lt;/code&gt;</description>
		<content:encoded><![CDATA[<p>It might be a good idea to trigger the original element change event. </p>
<p><code>
<pre>
			$("#"+name2).live("change", function(){
				// THIS IS VERY VERY SLOW IN FIREFOX
				//el.val($(this).val());
				el.attr("value", $(this).val());
---&gt;			el.trigger("change");
			}).trigger("change");
</pre>
<p></code></p>
]]></content:encoded>
	</item>
	<item>
		<title>Di: Alex</title>
		<link>http://www.senamion.com/blog/2010/03/10/jdoubleselect-jquery-plugin-transform-one-select-with-optgroups-into-two-selects/comment-page-1/#comment-801</link>
		<dc:creator>Alex</dc:creator>
		<pubDate>Tue, 05 Oct 2010 02:41:05 +0000</pubDate>
		<guid isPermaLink="false">http://www.senamion.com/blog/?p=54#comment-801</guid>
		<description>Here&#039;s a change that&#039;ll make the component work for not just optgroups but also options not included in opt groups

&lt;code&gt;&lt;pre&gt;
		$(this).children().each(function(i) {
				// Verify disabled or selected group
				if ($(this).attr(&quot;disabled&quot;))
					s = &quot; disabled &quot;;
				else if ($(this).find(&quot;:selected&quot;).attr(&quot;value&quot;)) {
					s = &quot; selected &quot;;
					}
				else s = &quot;&quot;;
				if($(this).attr(&quot;label&quot;)){//check if the child is option group
					groupSel += &quot;&quot;+$(this).attr(&quot;label&quot;)+&quot;&quot;;
				} else {
					groupSel += &quot;&quot;+$(this).html()+&quot;&quot;;
				}
			});
			$(this).hide().after(&quot;&quot;+groupSel+&quot; &quot;+o.text+&quot;&quot;);

			$(&quot;#&quot;+name1).change(function(){
				// REMOVE OLD ELEMENT, ADD NEW SELECT, BIND CHANGE EVENT AND TRIGGER IT
				$(&quot;#&quot;+name2).remove();
				
				if(el.find(&quot;optgroup[label=&quot;+$(this).val()+&quot;]&quot;).length &gt; 0){//if option group
					el.next().next().after(&quot;&quot;+el.find(&quot;optgroup[label=&quot;+$(this).val()+&quot;]&quot;).html()+&quot;&quot;);
				} else {//else option
					el.attr(&quot;value&quot;, $(this).val());
				}
				
				//el.val($(&quot;#&quot;+name2).val());
				$(&quot;#&quot;+name2).trigger(&quot;change&quot;);
			});
&lt;/pre&gt;&lt;/code&gt;</description>
		<content:encoded><![CDATA[<p>Here&#8217;s a change that&#8217;ll make the component work for not just optgroups but also options not included in opt groups</p>
<p><code>
<pre>
		$(this).children().each(function(i) {
				// Verify disabled or selected group
				if ($(this).attr("disabled"))
					s = " disabled ";
				else if ($(this).find(":selected").attr("value")) {
					s = " selected ";
					}
				else s = "";
				if($(this).attr("label")){//check if the child is option group
					groupSel += ""+$(this).attr("label")+"";
				} else {
					groupSel += ""+$(this).html()+"";
				}
			});
			$(this).hide().after(""+groupSel+" "+o.text+"");

			$("#"+name1).change(function(){
				// REMOVE OLD ELEMENT, ADD NEW SELECT, BIND CHANGE EVENT AND TRIGGER IT
				$("#"+name2).remove();

				if(el.find("optgroup[label="+$(this).val()+"]").length &gt; 0){//if option group
					el.next().next().after(""+el.find("optgroup[label="+$(this).val()+"]").html()+"");
				} else {//else option
					el.attr("value", $(this).val());
				}

				//el.val($("#"+name2).val());
				$("#"+name2).trigger("change");
			});
</pre>
<p></code></p>
]]></content:encoded>
	</item>
	<item>
		<title>Di: Attiks</title>
		<link>http://www.senamion.com/blog/2010/03/10/jdoubleselect-jquery-plugin-transform-one-select-with-optgroups-into-two-selects/comment-page-1/#comment-742</link>
		<dc:creator>Attiks</dc:creator>
		<pubDate>Tue, 14 Sep 2010 09:59:29 +0000</pubDate>
		<guid isPermaLink="false">http://www.senamion.com/blog/?p=54#comment-742</guid>
		<description>Anybody else having problems with IE7, I guess I&#039;m facing a timing issue because the value isn&#039;t passed to the form handler. All other browsers are working.</description>
		<content:encoded><![CDATA[<p>Anybody else having problems with IE7, I guess I&#8217;m facing a timing issue because the value isn&#8217;t passed to the form handler. All other browsers are working.</p>
]]></content:encoded>
	</item>
	<item>
		<title>Di: Giovanni</title>
		<link>http://www.senamion.com/blog/2010/03/10/jdoubleselect-jquery-plugin-transform-one-select-with-optgroups-into-two-selects/comment-page-1/#comment-715</link>
		<dc:creator>Giovanni</dc:creator>
		<pubDate>Mon, 06 Sep 2010 07:08:00 +0000</pubDate>
		<guid isPermaLink="false">http://www.senamion.com/blog/?p=54#comment-715</guid>
		<description>For multiselect you can use &lt;a href=&quot;http://www.senamion.com/blog/2010/02/20/jquery-select-multiple-double-side/&quot; rel=&quot;nofollow&quot;&gt;this plugin&lt;/a&gt;!</description>
		<content:encoded><![CDATA[<p>For multiselect you can use <a href="http://www.senamion.com/blog/2010/02/20/jquery-select-multiple-double-side/" rel="nofollow">this plugin</a>!</p>
]]></content:encoded>
	</item>
	<item>
		<title>Di: N8</title>
		<link>http://www.senamion.com/blog/2010/03/10/jdoubleselect-jquery-plugin-transform-one-select-with-optgroups-into-two-selects/comment-page-1/#comment-705</link>
		<dc:creator>N8</dc:creator>
		<pubDate>Wed, 01 Sep 2010 17:50:18 +0000</pubDate>
		<guid isPermaLink="false">http://www.senamion.com/blog/?p=54#comment-705</guid>
		<description>Looks like an interesting plug-in. Does it support multiple selects? If it can be made to work with multiple selects, I think it would be a good fit for a current project.</description>
		<content:encoded><![CDATA[<p>Looks like an interesting plug-in. Does it support multiple selects? If it can be made to work with multiple selects, I think it would be a good fit for a current project.</p>
]]></content:encoded>
	</item>
	<item>
		<title>Di: Izikd</title>
		<link>http://www.senamion.com/blog/2010/03/10/jdoubleselect-jquery-plugin-transform-one-select-with-optgroups-into-two-selects/comment-page-1/#comment-186</link>
		<dc:creator>Izikd</dc:creator>
		<pubDate>Sat, 03 Apr 2010 21:15:35 +0000</pubDate>
		<guid isPermaLink="false">http://www.senamion.com/blog/?p=54#comment-186</guid>
		<description>Glad to help ;)</description>
		<content:encoded><![CDATA[<p>Glad to help <img src='http://www.senamion.com/blog/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>
]]></content:encoded>
	</item>
	<item>
		<title>Di: Giovanni</title>
		<link>http://www.senamion.com/blog/2010/03/10/jdoubleselect-jquery-plugin-transform-one-select-with-optgroups-into-two-selects/comment-page-1/#comment-185</link>
		<dc:creator>Giovanni</dc:creator>
		<pubDate>Sat, 03 Apr 2010 15:37:12 +0000</pubDate>
		<guid isPermaLink="false">http://www.senamion.com/blog/?p=54#comment-185</guid>
		<description>I don&#039;t understand why, but with el.attr(&quot;value&quot;, $(this).val()); is fast! I think is a jQuery problem!
Thank you very much Izikd!!!</description>
		<content:encoded><![CDATA[<p>I don&#8217;t understand why, but with el.attr(&#8221;value&#8221;, $(this).val()); is fast! I think is a jQuery problem!<br />
Thank you very much Izikd!!!</p>
]]></content:encoded>
	</item>
	<item>
		<title>Di: Izikd</title>
		<link>http://www.senamion.com/blog/2010/03/10/jdoubleselect-jquery-plugin-transform-one-select-with-optgroups-into-two-selects/comment-page-1/#comment-184</link>
		<dc:creator>Izikd</dc:creator>
		<pubDate>Sat, 03 Apr 2010 15:12:47 +0000</pubDate>
		<guid isPermaLink="false">http://www.senamion.com/blog/?p=54#comment-184</guid>
		<description>For some reason the problem is on setting value on `el`.
For example: `el.val(100)` (even if it&#039;s just a number!)
It makes the slowness.

With original version 0.3, on Demo2 you have performance issue when selecting 2nd select.

This seems like fixing the issue:
FIND:
&lt;pre&gt;
el.val($(this).val());
&lt;/pre&gt;

REPLACE WITH:
&lt;pre&gt;
el.attr(&quot;value&quot;, $(this).val());
&lt;/pre&gt;

FIND:
&lt;pre&gt;
el.next().next().after(&quot;&quot;+el.find(&quot;optgroup[label=&quot;+$(this).val()+&quot;]&quot;).html()+&quot;&quot;);
&lt;/pre&gt;

AFTER ADD:
&lt;pre&gt;
$(&quot;#&quot;+name2).trigger(&quot;change&quot;);
&lt;/pre&gt;

Please insure that using `attr(&quot;value&quot;, value)` gives the same result as `val(value)`.</description>
		<content:encoded><![CDATA[<p>For some reason the problem is on setting value on `el`.<br />
For example: `el.val(100)` (even if it&#8217;s just a number!)<br />
It makes the slowness.</p>
<p>With original version 0.3, on Demo2 you have performance issue when selecting 2nd select.</p>
<p>This seems like fixing the issue:<br />
FIND:</p>
<pre>
el.val($(this).val());
</pre>
<p>REPLACE WITH:</p>
<pre>
el.attr("value", $(this).val());
</pre>
<p>FIND:</p>
<pre>
el.next().next().after(""+el.find("optgroup[label="+$(this).val()+"]").html()+"");
</pre>
<p>AFTER ADD:</p>
<pre>
$("#"+name2).trigger("change");
</pre>
<p>Please insure that using `attr(&#8221;value&#8221;, value)` gives the same result as `val(value)`.</p>
]]></content:encoded>
	</item>
</channel>
</rss>

