Fill a multiple select box from "outside"... PLEASE help!

[viktor]

Hello! I wonder if anyone knows how to fill a multiple selectionbox from links outside it, like...

SELECT BOX HERE----------------
<select name="thebox" multiple></select>

TEXTLINKS HERE------------------
<a href="#" onclick="document.theform.thebox.options = current options + the value '5' which is displayed as option 'numberfive'">number five</a>


*Submitting the same value to the box has to be prevented somehow.

*It has to be possible to remove a value from the box.

*When the form containing the selectbox is submitted, all the values in the selectbox should be sent.

Does anybody know how to do this? PLEASE PLEASE help!

[Alekz]

Hi,
I did not understood Your question very well, but anyway...

To add an option to a <SELECT>
var newOption = new Option(text,value);
document.frm.lstbox.options[document.frm.lstbox.options.length] = myOption;

To remove an option:
document.frm.lstbox.options[i] = null;

To submit all the values from the select box catch the onclick event of the submit button and then:
for(var i=0;i<document.frm.lstbox.options.length;i++){
document.frm.lstbox.options[i].selected = true;
}
This will select all the options in the <SELECT multiple>, so all of them will be submitted to the server...

hope this helps

Alex

[viktor]

Hello Alekz, thank you very much for your reply! There are a couple of more questions which I'd be extremely thankful if you could help me with:
--------------------------------------
Would it be possible to create a "new option function" which works so that I can have a link something like this:

onclick="newOption('3', 'numberthree', 'list1')"

...and then the function sends the value "3" and the option "numberthree" to the selectlist "list1".
(ie <select name="list1"><option value="3">numberthree</option></select>)

But only if the value "3" doesn't already exist in the list "list1" .
--------------------------------------
I also wonder - regarding the "remove function" - how to remove only one option from the list? Should I select one option and then use the function?

Again, thanks...

[Alekz]

Well...


function addOption(optText,optValue,frm_name,lstBox_name){
var newOption = new Option(optText,optValue);
var Box = document.forms[frm_name].elements[lstBox_name];
Box.options[Box.options.length] = newOption;
}


If Your form name is "frm" and the list box name is "lst" You could call it like
onclick="javascript:addOption(3,'numberthree','frm','lst')"
Note that the last parameter: lstBox_name must be the name attribute of an existing <SELECT> element, or the code will fail.

To remove one option just set it to null, like this:
document.frm.lst.options[3] = null;
It does not need to be selected. The way You realise which option have to be removed depends on Your applications logic...

Alex

[viktor]

Ok thanks... This looks brilliant. Just one last question then:

Say I want to remove one or more options from the list, by having one or more selected and then clicking a button beside the list... How can I achieve that?

Sorry but I dont know a lot of javascript... /Viktor

[Alekz]

OK,
First of all You have to set multiple attribute on the <SELECT> element, then:

function deleteSelection(frm_name,lstBox_name){
var Box = document.forms[frm_name].elements[lstBox_name];
var i = 0;
while(i<Box.options.length){
if (Box.options[i].selected)
Box.options[i] = null;
else
i++;
}
}


Alex

[viktor]

Thanks.... I have uploaded an example at http://lindblomsel.citynetwork.se/addopttest.htm , cause I get 2 errors:

* Error "object expected" (free translation, got swedish version of IE) when trying to remove items
* The same value can be added twice (not really an error but...)

Please someone have a look!

[Alekz]

OK, I forgot...
modify addOpt function like this:

function addOpt(optValue,optText,frm_name,lstBox_name){
var Box = document.forms[frm_name].elements[lstBox_name];
for(var i=0;i<Box.options.length;i++) if(Box.options[i].value == optValue) return;
var newOption = new Option(optText,optValue);
Box.options[Box.options.length] = newOption;
}


As of the first error, Your function is named 'delopt', but You try to invoke it as delOpt. JavaScript is case sensitive...

Alex

[viktor]

PERFECT! Many thanks Alekz!

Hope I can help someone as much as you helped me in the future... When I've learned more. I will not make that "casesensitive" mistake again that's for sure!

Best Regards/Viktor

[Alekz]

You are welcome :)

Alex

[RadarBob]

This may be helpful:
http://www.codingforums.com/showthread.php?s=&threadid=7690

It's derived from code I received here at coding forums. Looks like the original post from which I got the code has been deleted by the author so I thought I'd post my code. Even though there's "application specific" server-side code it will still be useful.