Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Sep 2002
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Multiple Select List

    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

  • #2
    New Coder
    Join Date
    Sep 2002
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OK.....I almost got the solution with the following code:
    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

  • #3
    New Coder
    Join Date
    Sep 2002
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No need to answer this post, friends. I am using the JavaScript substr string function to get rid of undefined, .

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    No need to use substr. Just avoid the undefined to occur.
    Code:
    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
            }
        }
    }
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •