Location: PHPKode > scripts > PSPLMultiselect > psplmultiselect/documentation.html
<p>PSPL multi select box is very simple to install and configure. There are only 5 steps to follow to get the stylish PSPL multi select box installed on your webpages </p>
<p style="font-size:18px;">Index</p>
<b>Installation</b>
<ul>

  <li><a href="#installation_step_1">Step 1. Import the Javascript and CSS files in your HTML </a></li>
  <li><a href="#installation_step_2">Step 2. Add a normal Select multiple box in your page </a></li>
  <li><a href="#installation_step_3">Step 3. Add a span around the select multiple box </a></li>
  <li><a href="#installation_step_4">Step4. Call Init() function after the span </a></li>
</ul>
<b>Customizing the PSPL multi select box </b>
<ul>
  <li><a href="#Customization_changing_arrow_image">Changing the arrow image </a></li>

  <li><a href="#Customization_changing_textbox">Changing the styles of text box </a></li>
  <li><a href="#Customization_changing_cells">Changing the styles of cells of the dropdown</a></li>
</ul>
<br><br><br>
<a name="Installation"></a><h2>Installation </h2>
<h3>
<a name="installation_step_1"></a>Step 1 : Import the Javascript and CSS files in your HTML </h3>
<p>First import the javascript file( pspl_multiselect.js ) and css file( pspl_multiselect.css).
<br>In head section of your html add following </p>
<div style="color:#333333; background-color:#EFFEED;text-align:left;">

<br>&lt;link href=&quot;pspl_multiselect.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt; 
<br>
&lt;script language=&quot;javascript&quot; src=&quot;pspl_multiselect.js&quot; type=&quot;text/javascript&quot;&gt;

<br>&lt;/script&gt; 
<br>&nbsp;</div>
<br>
<h3><a name="installation_step_2"></a>Step 2 :Add a normal Select multiple box in your page</h3>
<p>First add normal select multiple box in your webpage.e.g.
<div style="color:#333333; background-color:#EFFEED;text-align:left;"><br>
&lt;SELECT <strong>multiple id=”companies” name=”companies[]” </strong>size=”3” &gt; <br>
&nbsp;</div>
<p>Here you must have noticed that we have assigned an <em>id </em>to our select multiple box.

<br> Also notice the <em>name </em>of the select multiple box, the <em>name </em> is the <em>id </em> with []. So if <em>name </em>of your select multiple box is “boxName[]” then name of the <em>id </em> must be boxName.
<br>This id should not be used in for any other element in that page.
<br>Please note that the [] in <em>name </em>of the select multiple box is very important as it indicates that the field can have multiple values.

<br>The keyword <em>multiple</em> is very important as well. </p>
<b>Points to remember</b>
<ul>
  <li>Assign an <em>name </em>and <em>id </em> to each select box</li>
  <li>[] is necessary in the <em>name</em>.</li>

  <li><em>multiple </em> is a necessary attribute </li>
  
</ul>

<h3><a name="installation_step_3"></a>Step 3 : Add a span around the select multiple box</h3>
<div style="color:#333333; background-color:#EFFEED;text-align:left;"><br>&lt;span id=”companies<strong>_box </strong>” class=”selBox”&gt;
<br>
&lt;SELECT <strong>multiple id=”companies” name=”companies[]” </strong>size=”3” &gt;

<br>&lt;option&gt;options1 &lt;/option&gt;
<br>&lt;option&gt;options2 &lt;/option&gt;
<br>&lt;option&gt;options3 &lt;/option&gt;
<br>&lt;/SELECT&gt;
<br>&lt;/span&gt;
<br>&nbsp; </div>

<p>Again you must have noticed that the span has <em>id </em> as well and id of span should be made by adding <strong>_box </strong> to the id of the select multiple box. </p>
<br>
<b>Points to remember </b>
<ul>
  <li>The span id must be made by adding _box to the id of select multiple box.</li>
  <li>The <em>span </em>should not contain anything other than the select multiple box. Why? Because this will hide the other things you added to the span while it renders the PSPL Multi Select Box.</li>

</ul>
<br>
<h3><a name="installation_step_4"></a>Step 4 : Call the Javascript function Init() after the span</h3>
<p>After the span add a call to Init() function to initialize the PSPL multi select box.</p>
<p style="color:#333333; background-color:#EFFEED;text-align:left;">
<br>&lt;body&gt; 
<br>
&lt;span id=”companies<strong>_box </strong>” class=”selBox”&gt;
<br>
&lt;SELECT multiple id=”companies” name=”companies[]” <strong></strong>size=”3” &gt;

<br>
&lt;option&gt;options1 &lt;/option&gt;
<br>&lt;option&gt;options2 &lt;/option&gt;
<br>&lt;option&gt;options3 &lt;/option&gt;
<br>&lt;/SELECT&gt;
<br>&lt;/span&gt;

<br>&lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot;&gt;
<br><strong>Init( 'companies', &quot;arrow_on6.gif&quot;, &quot;arrow_off6.gif&quot;,&quot;arrow6&quot;, &quot;optionTextBox6&quot;, &quot;optionDiv6&quot;, &quot;cell6&quot;, &quot;cellHover6&quot;, &quot;cellSelected6&quot; ); </strong>

<br>&lt;/script&gt;
<br>&lt;/body&gt; </p>
<p>please write call to Init() for each of your PSPL Multi select box after its <em>span </em>.
<br>You need not change the parameters after the first three. </p>
<ul>
  <li>The First parameter to Init() function is the <em>id </em> of your select multiple box</li>

  <li>Second parameter is the path of the arrow image of the PSPL multi select box to be displayed on mouse over.</li>
  <li>Third parameter is the path of arrow image to be displayed normally(when mouse is not on it ).</li>
</ul>
<br>Next parameters need not be changed unless you are trying to use different styles of PSPL multi select boxes on same page. For that you can refer to “creating more than one styles for your PSPL multi select box” page.
<ul>
  <li>Fourth parameter is the class name for the arrow images which defines its styles.</li>
  <li>Fifth parameter is the class name of the textbox rendered besides the arrow image.</li>
  <li>Sixth parameter is the class name of the <em>div </em> or <em>span </em> in which the textbox and arrow image is contained.</li>

  <li>Seventh parameter is the class name of the cell of dropdown menu.</li>
  <li>Eighth parameter is the class name of the cell when mouse rolls over it.</li>
  <li>Ninth parameter is the class name of selected cells of the drop down menu of PSPL multi select box.</li>
</ul>
<br><br>
<a name="Customization"></a><h2>Customizing the PSPL multi select box</h2>

<p><a name="Customization_changing_arrow_image"></a><b>Changing the arrow image: </b>
<ul>

  <li>You can directly change the arrow image by overwriting the current arrow images with new one. The size of arrow images should be 20px and if you want to use bigger sizes you must change the size of the container span accordingly, this is easy for novice users, but this is not a recommended method.</li>
  <li>You can also create two new images in same folder, where the current arrow images are stored, then while you call the Init function, you can just specify the new names instead of the default names. Suppose for one PSPL multi select box you want a arrow image named new_arrow_on.gif and new_arrow_off.gif, then in you call Init() as
  <br><br>
  <div style="color:#333333; background-color:#EFFEED;text-align:left;"><br>&lt;script language=&quot;javascript&quot;&gt; 
<br>Init( 'companies', &quot; <strong> new_arrow_on.gif </strong> &quot;, &quot; <strong>new_arrow_off.gif </strong><strong></strong>&quot;,&quot;arrow6&quot;, &quot;optionTextBox6&quot;, &quot;optionDiv6&quot;, &quot;cell6&quot;, &quot;cellHover6&quot;, &quot;cellSelected6&quot; ); 

<br>&lt;/script&gt; 
<br>&nbsp;
</div>
  </li>
</ul>
</p>

<p><b><a name="Customization_changing_textbox"></a>Changing the styles of text box : </b>
<ul>
  <li>If you are a novice user and wish to use the single style for all PSPL multi select boxes on all pages of your website, then you can change the styles of the textbox besides the arrow image of PSPL multi select box by changing the styles of class <em>optionTextBox </em> in the pspl_multiselect.css you included in your page. </li>

  <li>If you are an advanced user, just define a css class with a different name in the css file and use that class name in the Init() function call. Please note that there are some styles in this class which should remain intact these styles are marked /*don't change this */ in the css file. So while defining new class you must copy those styles/properties in your new class exactly as they are in the default class. </li>
</ul>
</p>
<p> <b><a name="Customization_changing_cells"></a>Changing the styles of cells of the dropdown. </b>
<ul><li>This too can be done in two ways as the text box, edit the current styles if you want to have same style throughout your pages, or if you want different styles of PSPL multi select box in your pages then define extra classes and pass them as parameters to Init() of the respective PSPL multi select box.
</li></ul>
</p>
Return current item: PSPLMultiselect