...

View Full Version : Multiple Select List



arpan_de
04-26-2007, 10:34 PM
A HTML Form has a select list & a textbox. Users can select multiple options in the select list.

Assume that the select list has the following 10 options:

Argentina
Brazil
China
Denmark
Egypt
Finland
Ghana
Hungary
India
Japan

What I want is when a user selects, say, China in the select list, then the textbox value should change to

China

Keeping the Ctrl key on the keyboard pressed to select another option along with China in the select list, the user next selects Finland. Now the textbox value should change to

China, Finland

Next he selects India (along with China & Finland) in the select list. The textbox value should now change to

China, Finland, India

Next the user de-selects Finland in the select list. The textbox value should now change to

China, India

Next he selects, say, Ghana (China & India are already selected) in the select list. The textbox value should change to

China, Ghana, India

How do I do this using JavaScript?

Note that as & when a user selects the options, the order of the textbox value should be the same as the order of the select list options. For e.g. assuming that the textbox value is

China, Ghana, India

(which means the user has selected China, Ghana & India in the select list), next if the user selects Brazil in the select list, the textbox value should change to

Brazil, China, Ghana, India

& not

China, Ghana, India, Brazil

Thanks

arpan_de
04-26-2007, 11:16 PM
OK.....I almost got the solution with the following code:


<script language="JavaScript">
function copySelected(fromObject,toObject){
var strLoc
for(var i=0;i<fromObject.options.length;i++){
if(fromObject.options[i].selected==true){
strLoc=strLoc + ", " + fromObject.options[i].text
toObject.value=strLoc
}
}
}
</script>
<form>
<select name="jobloc" onChange="copySelected(this.form.jobloc,this.form.loc)" multiple size=4>
<input type=text name="loc">
</form>
The above code works exactly as I want it to but there's a minor problem. Assume that none of the options are selected in the select list. Next I select any option in the select list (say, Finland). Then the textbox value changes to

undefined, Finland

i.e. the first option selected in the select list is precede with undefined, . Next suppose the user selects Hungary in the select list, then the textbox value changes to

undefined, Finland, Hungary

As already said, this happens only when none of the options are selected in the select list & an option is then selected. How do I get rid of

undefined,

using the above code? Of course, I can use the various JavaScript string functions to get rid of undefined, .........

Thanks

arpan_de
04-26-2007, 11:30 PM
No need to answer this post, friends. I am using the JavaScript substr string function to get rid of undefined, .

glenngv
04-27-2007, 06:39 AM
No need to use substr. Just avoid the undefined to occur.

function copySelected(fromObject,toObject){
var strLoc="";
for(var i=0;i<fromObject.options.length;i++){
if(fromObject.options[i].selected==true){
strLoc=(strLoc!="") ? strLoc + ", " + fromObject.options[i].text : fromObject.options[i].text;
toObject.value=strLoc
}
}
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum