<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
   <title>Pseudointellectual Appendification</title>
   <link rel="alternate" type="text/html" href="http://www.mischievous.org/" />
   <link rel="self" type="application/atom+xml" href="http://www.mischievous.org/atom.xml" />
   <id>tag:www.mischievous.org,2007-06-22://1</id>
   <updated>2007-06-22T17:11:16Z</updated>
   <subtitle>Able or tending to cause annoyance, trouble, or minor injury.</subtitle>
   <generator uri="http://www.sixapart.com/movabletype/">Movable Type Publishing Platform 4.0</generator>

<entry>
   <title>Using MochiKit to Move Items Between Select Lists</title>
   <link rel="alternate" type="text/html" href="http://www.mischievous.org/2006/06/using_mochikit_to_move_items_b.html" />
   <id>tag:www.mischievous.org,2006://1.4</id>
   
   <published>2006-06-20T17:09:24Z</published>
   <updated>2007-06-22T17:11:16Z</updated>
   
   <summary>If you are writing client side JavaScript you should be using MochiKit. I found myself needing to implement two select list boxes where items are moved from one to the other. I was able to implement this with some very...</summary>
   <author>
      <name></name>
      
   </author>
   
   <category term="mochikit" label="mochikit" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="en-US" xml:base="http://www.mischievous.org/">
      <![CDATA[If you are writing client side JavaScript you should be using <a class="external" href="http://mochikit.com/">MochiKit</a>.
I found myself needing to implement two select list boxes where items
are moved from one to the other. I was able to implement this with some
very concise JavaScript thanks to MochiKit's functional programming and
DOM manipulation APIs. <pre><tt>    <span style="font-weight: bold;"><span style="color: rgb(0, 0, 255);">function</span></span> <span style="font-weight: bold;"><span style="color: rgb(0, 0, 0);">makeOption</span></span><span style="color: rgb(153, 0, 0);">(</span>option<span style="color: rgb(153, 0, 0);">)</span> <span style="color: rgb(255, 0, 0);">{</span><br>      <span style="font-weight: bold;"><span style="color: rgb(0, 0, 255);">return</span></span> <span style="font-weight: bold;"><span style="color: rgb(0, 0, 0);">OPTION</span></span><span style="color: rgb(153, 0, 0);">(</span><span style="color: rgb(255, 0, 0);">{</span><span style="color: rgb(255, 0, 0);">"value"</span><span style="color: rgb(153, 0, 0);">:</span> option<span style="color: rgb(153, 0, 0);">.</span>value<span style="color: rgb(255, 0, 0);">}</span><span style="color: rgb(153, 0, 0);">,</span> option<span style="color: rgb(153, 0, 0);">.</span>text<span style="color: rgb(153, 0, 0);">)</span><span style="color: rgb(153, 0, 0);">;</span><br>    <span style="color: rgb(255, 0, 0);">}</span><br>     <br>    <span style="font-weight: bold;"><span style="color: rgb(0, 0, 255);">function</span></span> <span style="font-weight: bold;"><span style="color: rgb(0, 0, 0);">moveOption</span></span><span style="color: rgb(153, 0, 0);">(</span> fromSelect<span style="color: rgb(153, 0, 0);">,</span> toSelect<span style="color: rgb(153, 0, 0);">)</span><br>    <span style="color: rgb(255, 0, 0);">{</span><br>      <span style="font-style: italic;"><span style="color: rgb(154, 25, 0);">// add 'selected' nodes toSelect</span></span><br>      <span style="font-weight: bold;"><span style="color: rgb(0, 0, 0);">appendChildNodes</span></span><span style="color: rgb(153, 0, 0);">(</span>toSelect<span style="color: rgb(153, 0, 0);">,</span><br>        <span style="font-weight: bold;"><span style="color: rgb(0, 0, 0);">map</span></span><span style="color: rgb(153, 0, 0);">(</span> makeOption<span style="color: rgb(153, 0, 0);">,</span><br>          <span style="font-weight: bold;"><span style="color: rgb(0, 0, 0);">ifilter</span></span><span style="color: rgb(153, 0, 0);">(</span><span style="font-weight: bold;"><span style="color: rgb(0, 0, 0);">itemgetter</span></span><span style="color: rgb(153, 0, 0);">(</span><span style="color: rgb(255, 0, 0);">'selected'</span><span style="color: rgb(153, 0, 0);">)</span><span style="color: rgb(153, 0, 0);">,</span> $<span style="color: rgb(153, 0, 0);">(</span>fromSelect<span style="color: rgb(153, 0, 0);">)</span><span style="color: rgb(153, 0, 0);">.</span>options<span style="color: rgb(153, 0, 0);">)</span><span style="color: rgb(153, 0, 0);">)</span><br>      <span style="color: rgb(153, 0, 0);">)</span><span style="color: rgb(153, 0, 0);">;</span><br><br>      <span style="font-style: italic;"><span style="color: rgb(154, 25, 0);">// remove the 'selected' fromSelect</span></span><br>      <span style="font-weight: bold;"><span style="color: rgb(0, 0, 0);">replaceChildNodes</span></span><span style="color: rgb(153, 0, 0);">(</span>fromSelect<span style="color: rgb(153, 0, 0);">,</span><br>        <span style="font-weight: bold;"><span style="color: rgb(0, 0, 0);">list</span></span><span style="color: rgb(153, 0, 0);">(</span><span style="font-weight: bold;"><span style="color: rgb(0, 0, 0);">ifilterfalse</span></span><span style="color: rgb(153, 0, 0);">(</span><span style="font-weight: bold;"><span style="color: rgb(0, 0, 0);">itemgetter</span></span><span style="color: rgb(153, 0, 0);">(</span><span style="color: rgb(255, 0, 0);">'selected'</span><span style="color: rgb(153, 0, 0);">)</span><span style="color: rgb(153, 0, 0);">,</span> $<span style="color: rgb(153, 0, 0);">(</span>fromSelect<span style="color: rgb(153, 0, 0);">)</span><span style="color: rgb(153, 0, 0);">.</span>options<span style="color: rgb(153, 0, 0);">)</span><span style="color: rgb(153, 0, 0);">)</span><br>      <span style="color: rgb(153, 0, 0);">)</span><span style="color: rgb(153, 0, 0);">;</span><br>    <span style="color: rgb(255, 0, 0);">}</span>
</tt></pre><p>
You can see a <a href="../../l/mochikit.select.example">working example</a>.
</p><p>
There are <a class="external" href="http://www.mattkruse.com/javascript/selectbox/source.html">longer and more complete</a> examples out there, but you should be able to implement all of the functionality that they provide using MochiKit.</p> ]]>
      
   </content>
</entry>

</feed>
