Gossamer Forum: Products: Gossamer Links: Discussions: Multi Select

Oct 4, 2004, 8:26 AM

VishalT

Veteran (1127 posts)

Oct 4, 2004, 8:26 AM

Post #1 of 3

Shortcut

Multi Select - Link Property

I was wondering if anyone knows how to setup a multi-select option within link properties, so when users are adding a link they will be able to select the options as desired.

I am wanting to setup multiselect option like :
http://www.philwebb.com/code/list_box.asp

The options I plan to use are:

DOS
Windows 95
Windows 98
Windows Me
Windows 2000
Windows 2003
Windows XP
Mac OS X
Palm OS
Unix / Linux
Others

HERE IS THE JAVA SCRIPT CODE [between the <head> tag]
-----------------------------------------------------------------
<script type="text/javascript">
// PickList II script (aka Menu Swapper)- By Phil Webb (http://www.philwebb.com)
// Visit JavaScript Kit (http://www.javascriptkit.com) for this JavaScript and 100s more
// Please keep this notice intact
function move(fbox, tbox) {
var arrFbox = new Array();
var arrTbox = new Array();
var arrLookup = new Array();
var i;
for(i=0; i<tbox.options.length; i++) {
arrLookup[tbox.options.text] = tbox.options.value;
arrTbox = tbox.options.text;
}
var fLength = 0;
var tLength = arrTbox.length
for(i=0; i<fbox.options.length; i++) {
arrLookup[fbox.options.text] = fbox.options.value;
if(fbox.options.selected && fbox.options.value != "") {
arrTbox[tLength] = fbox.options.text;
tLength++;
} else {
arrFbox[fLength] = fbox.options.text;
fLength++;
}
}
arrFbox.sort();
arrTbox.sort();
fbox.length = 0;
tbox.length = 0;
var c;
for(c=0; c<arrFbox.length; c++) {
var no = new Option();
no.value = arrLookup[arrFbox[c]];
no.text = arrFbox[c];
fbox[c] = no;
}
for(c=0; c<arrTbox.length; c++) {
var no = new Option();
no.value = arrLookup[arrTbox[c]];
no.text = arrTbox[c];
tbox[c] = no;
}
}
function selectAll(box) {
for(var i=0; i<box.length; i++) {
box.selected = true;
}
}
</script>
-----------------------------------------------------------------

HERE IS THE FORM CODE
-----------------------------------------------------------------
<form method="post" name="select_options">
<table cellpadding="4" cellspacing="0" border="0">
<tr>
<td><select multiple size="10" name="list1" style="width:150"
ondblclick="move(document.combo_box.list1,document.combo_box.list2)">
<option value="12">Alabama</option>
<option value="54">Alaska</option>
<option value="65">Arizona</option>
<option value="45">Arkansas</option>
<option value="2">California</option>
<option value="6">Colorado</option>
<option value="81">Connecticut</option>
<option value="5">Delaware</option>
<option value="23">District of Columbia</option>
<option value="58">Florida</option>
<option value="87">Georgia</option>
<option value="98">Hawaii</option>
<option value="53">Idaho</option>
<option value="22">Illinois</option>
<option value="28">Indiana</option>
<option value="89">Iowa</option>
<option value="71">Kansas</option>
<option value="35">Kentucky</option>
<option value="85">Louisiana</option>
<option value="9">Maine</option>
<option value="7">Maryland</option>
<option value="77">Massachusetts</option>
<option value="36">Michigan</option>
<option value="87">Minnesota</option>
<option value="66">Mississippi</option>
<option value="34">Missouri</option>
<option value="50">Montana</option>
<option value="20">Nebraska</option>
<option value="25">Nevada</option>
<option value="32">New Hampshire</option>
<option value="27">New Jersey</option>
<option value="74">New Mexico</option>
<option value="17">New York</option>
<option value="3">North Carolina</option>
<option value="13">North Dakota</option>
<option value="4">Ohio</option>
<option value="21">Oklahoma</option>
<option value="12">Oregon</option>
<option value="48">Pennsylvania</option>
<option value="63">Rhode Island</option>
<option value="82">South Carolina</option>
<option value="14">South Dakota</option>
<option value="72">Tennessee</option>
<option value="49">Texas</option>
<option value="47">Utah</option>
<option value="92">Vermont</option>
<option value="59">Virginia</option>
<option value="52">Washington</option>
<option value="41">West Virginia</option>
<option value="46">Wisconsin</option>
<option value="95">Wyoming</option>
</select> </td>
<td align="center" valign="middle"><input type="button"
onclick="move(this.form.list2,this.form.list1)" value="<<"
id="button1" name="button1"> <input type="button"
onclick="move(this.form.list1,this.form.list2)" value=">>"
id="button2" name="button2"> </td>
<td><select multiple size="10" name="list2" style="width:150"
ondblclick="move(document.combo_box.list2,document.combo_box.list1)">
</select> </td>
</tr>
<tr>
<td align="center" colspan="3"><input type="submit"
name="submit_button" value="Submit"
onclick="selectAll(document.combo_box.list2);"></td>
</tr>
</table>
</form>
-----------------------------------------------------------------

Thank you for the help, it is very much appreciated.

Vishal Thakkar

Vishal
-------------------------------------------------------

Last edited by:

NeedScripts.Com: Oct 4, 2004, 8:30 AM

Jun 10, 2005, 10:42 AM

VishalT

Veteran (1127 posts)

Jun 10, 2005, 10:42 AM

Post #2 of 3

Shortcut

Re: [SWDevil.Com] Multi Select - Link Property In reply to

~ anyone ~ ?

Vishal
-------------------------------------------------------

Jun 10, 2005, 11:42 AM

Andy

Veteran / Moderator (18441 posts)

Jun 10, 2005, 11:42 AM

Post #3 of 3

Shortcut

Re: [SWDevil.Com] Multi Select - Link Property In reply to

Hi,

You could try adding a new global, called "populate_cat_options", with the following;

Code:
sub { 

  my $table = $DB->table('Category'); 
        $table->select_options('ORDER BY Full_Name DESC'); 
   my $sth = $table->select(); 
    my $back; 
    while (my $hit = $sth->fetchrow_hashref) { 
       $back .= qq{		<option value="$hit->{ID}">$hit->{Full_Name}</option>\n};         
    } 
    return $back; 
}

...and then this code;

Code:
<script language="JavaScript"> 
function move(fbox, tbox) { 
     var arrFbox = new Array(); 
     var arrTbox = new Array(); 
     var arrLookup = new Array(); 
     var i; 
     for(i=0; i<tbox.options.length; i++) { 
          arrLookup[tbox.options.text] = tbox.options.value; 
          arrTbox = tbox.options.text; 
     } 
     var fLength = 0; 
     var tLength = arrTbox.length 
     for(i=0; i<fbox.options.length; i++) { 
          arrLookup[fbox.options.text] = fbox.options.value; 
          if(fbox.options.selected && fbox.options.value != "") { 
               arrTbox[tLength] = fbox.options.text; 
               tLength++; 
          } else { 
               arrFbox[fLength] = fbox.options.text; 
               fLength++; 
          } 
     } 
     arrFbox.sort(); 
     arrTbox.sort(); 
     fbox.length = 0; 
     tbox.length = 0; 
     var c; 
     for(c=0; c<arrFbox.length; c++) { 
          var no = new Option(); 
          no.value = arrLookup[arrFbox[c ]]; 
          no.text = arrFbox[ c]; 
          fbox[c] = no; 
     } 
     for(c=0; c<arrTbox.length; c++) { 
     	var no = new Option(); 
     	no.value = arrLookup[arrTbox[ c]]; 
     	no.text = arrTbox[ c]; 
     	tbox[ c] = no; 
     } 
} 
 
function selectAll(box) { 
     for(var i=0; i<box.length; i++) { 
     box.selected = true; 
     } 
} 
</script> 
 
	<b>Form Menu Swapper</b> 
	<p> 
	<form action="list_box.asp" method="post" name="combo_box"> 
 
	<table cellpadding="4" cellspacing="0" border="0"> 
	<tr> 
		<td> 
		<select multiple size="10" name="list1" style="width:150" onDblClick="move(document.combo_box.list1,document.combo_box.list2)"> 
          <%populate_cat_options%> 
		</select> 
		</td> 
		<td align="center" valign="middle"> 
		<input type="button" onClick="move(this.form.CatLinks,this.form.list1)" value="<<" id=button1 name=button1> 
		<input type="button" onClick="move(this.form.list1,this.form.CatLinks)" value=">>" id=button2 name=button2> 
		</td> 
		<td> 
		<select multiple size="10" name="CatLinks" style="width:150" onDblClick="move(document.combo_box.CatLinks,document.combo_box.list1)"> 
		</select> 
 
		</td> 
	</tr> 
	<tr><td align="center" colspan="3"><input type="submit" name="submit_button" value="Submit" onClick="selectAll(document.combo_box.CatLinks);"></td></tr> 
	</table> 
	</form>

The only problem with this, is that you need to edit Add.pm, so that it will look for $IN->param('CatLinks'), and not $IN->param('CatLinks.CategoryID').

The reason you have to do this, is because otherwise the javascript screws at you, when you have;

move(this.form.CatLinks,this.form.list1)

..it would read it as;

move(this.form.CatLinks.CategoryID,this.form.list1)

..note the extra ., which would be taken literally (I'm not aware of a way to escape that).

Hope that helps/gets you on the right tracks

Cheers

Andy (mod)
andy@ultranerds.co.uk
Want to give me something back for my help? Please see my Amazon Wish List
GLinks ULTRA Package | GLinks ULTRA Package PRO
Links SQL Plugins | Website Design and SEO | UltraNerds | ULTRAGLobals Plugin | Pre-Made Template Sets | FREE GLinks Plugins!