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 14 of 14

Thread: Dropdown help

  1. #1
    Regular Coder
    Join Date
    Sep 2009
    Location
    Calgary, Alberta
    Posts
    241
    Thanks
    48
    Thanked 3 Times in 3 Posts

    Dropdown help

    if I had two dropdown boxes...

    If I select the first one with the value of the month name .. eg.. January.

    How can I get the second dropdown box below to get that same value.??

    Thanks S.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,159
    Thanks
    203
    Thanked 2,549 Times in 2,527 Posts
    Code:
    <select id = "mysel1" onchange ="document.getElementById('mysel2').selectedIndex=this.selectedIndex">
    <option value = "0"> Select a month ...</option>
    <option value = "1">January</option>
    <option value = "2">February</option>
    <option value = "3">March</option>
    </select>
    
    <select id = "mysel2" onchange ="this.selectedIndex = document.getElementById('mysel1').selectedIndex">
    <option value = "0"> Select a month ...</option>
    <option value = "1">January</option>
    <option value = "2">February</option>
    <option value = "3">March</option>
    </select>
    "The reward for conformity was that everyone liked you except yourself". - Rita Mae Brown.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    SlayerACC (03-17-2012)

  • #3
    Regular Coder
    Join Date
    Sep 2009
    Location
    Calgary, Alberta
    Posts
    241
    Thanks
    48
    Thanked 3 Times in 3 Posts
    You are Awesome!!!!!!!!!


    Thank you sooo much


    Slayer.

  • #4
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by Philip M View Post
    Code:
    <select id = "mysel2" onchange ="this.selectedIndex = document.getElementById('mysel1').selectedIndex">
    <option value = "0"> Select a month ...</option>
    <option value = "1">January</option>
    <option value = "2">February</option>
    <option value = "3">March</option>
    </select>
    There might be noobies scratching their heads wondering why on earth would you need a duplicate set of options in the 2nd <select>

    From a maintenace point of view, the set of options in the second <select> are a waste and redundant. If in the future you change the options in the 1st <select>, you will have to make the same change in the 2nd <select> also which seems silly to have to do imo.

    Imo a better way to do it is to not have any options in the 2nd <select> initially and then just copy the currently selected <option> in the 1st <select> to the 2nd <select> after first deleting any <option> in the 2nd <select> and set it as selected.

    This also removes the need for the onchange in the 2nd <select> which reduces maintenace as well.

    This way, if the <option>s have to be changed in the future, you need to make the change in only 1 <select> instead of both of them.

    You could do something like this with only 1 set of options and only 1 onchange event handler.

    Code:
        <body>
            <select id="sel1" name="sel1">
                <option value="" selected="selected">Choose an option</option>
                <option value="val1">Option 1</option>
                <option value="val2">Option 2</option>
                <option value="val3">Option 3</option>
                <option value="val4">Option 4</option>
            </select>
            <select id="sel2" name="sel2"></select>
            
            <script type="text/javascript">
                sel1O = document.getElementById('sel1');
                sel2O = document.getElementById('sel2');
                sel2O.options[sel2O.options.length] = getSelectedOption(); //set initial option in sel2
                sel1O.onchange=function(){
                    sel2O.options.length = 0;  //delete any options in sel2
                    sel2O.options[sel2O.options.length] = getSelectedOption();
                    sel2O.selectedIndex = 0;
                }
                function getSelectedOption(){
                    return sel1O.options[sel1O.selectedIndex].cloneNode(true);
                }
            </script>
        </body>
    Last edited by webdev1958; 03-18-2012 at 02:44 AM.

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,159
    Thanks
    203
    Thanked 2,549 Times in 2,527 Posts
    Quote Originally Posted by webdev1958 View Post
    There might be noobies scratching their heads wondering why on earth would you need a duplicate set of options in the 2nd <select>

    Imo a better way to do it is to not have any options in the 2nd <select> initially and then just copy the currently selected <option> in the 1st <select> to the 2nd <select> after first deleting any <option> in the 2nd <select> and set it as selected.
    I would have thought it equally pointless to have a select box with only one option. And your code throws an error in IE9.

    Here is another script to transfer the selected options of list1 into list2. This may perhaps be what the OP was really looking for, although he seems to be quite satisfied with the script I gave him.

    Code:
    <form name='myform'>
    <select name = 'list1' id = 'list1' onchange = "removeOptions(this)">
    <option selected value=""> Choose One Or More Fruits</option>
    <option value='Mango'> Mango </option>
    <option value='Apple'> Apple </option>
    <option value='Sunkist'> Sunkist </option>
    <option value='Watermelon'> Watermelon </option>
    <option value='Papaya'> Papaya </option>
    <option value='Strawberry'> Strawberry </option>
    <option value='Banana'> Banana </option>
    <option value='Peach'> Peach </option>
    </select>
    
    <select name = 'list2' id = 'list2'>
    <option value = ""> You have selected:- </option>
    </select>
    
    </form>
    
    <script type = "text/javascript">
    var val = "";
    function removeOptions(selectbox) {
    val = selectbox.value;
    for (var i = selectbox.options.length-1; i>=1; i--) {
    if (selectbox.options[i].selected) {
    selectbox.remove(i);
    addOption(document.myform.list2,val,val);
    document.myform.list1.focus();
    }
    }
    }
    
    function addOption(selectbox,optiontext,optionvalue )
    {
    var optn = document.createElement("OPTION");
    optn.text = optiontext;
    optn.value = optionvalue;
    selectbox.options.add(optn);
    }
    
    </script>
    Last edited by Philip M; 03-18-2012 at 11:59 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #6
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by Philip M View Post
    I would have thought it equally pointless to have a select box with only one option. And your code throws an error in IE9.
    Not all The op wanted just the selected option in sel1 to be the selected option in sel2, so the other options in sel2 are redundant and so only one option is required in it.

    Also, the script works fine in my IE9 without errors. I suspect you probably have done something wrong again like last time when you claimed that IE9 does not support document.getElementsByClassName() which of course it does
    Last edited by webdev1958; 03-19-2012 at 06:25 AM.

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,793
    Thanks
    6
    Thanked 1,022 Times in 995 Posts
    Quote Originally Posted by webdev1958 View Post
    Imo a better way to do it is to not have any options in the 2nd <select> initially and then just copy the currently selected <option> in the 1st <select> to the 2nd <select> after first deleting any <option> in the 2nd <select> and set it as selected.

    […]

    You could do something like this with only 1 set of options and only 1 onchange event handler.

    Code:
        <body>
            <select id="sel1" name="sel1">
                <option value="" selected="selected">Choose an option</option>
                <option value="val1">Option 1</option>
                <option value="val2">Option 2</option>
                <option value="val3">Option 3</option>
                <option value="val4">Option 4</option>
            </select>
            <select id="sel2" name="sel2"></select>
            
            <script type="text/javascript">
                …
            </script>
        </body>
    Well, in this case you could just generate the select element with JS, too. After all, what’s the semantic value of an empty select element in the document?

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,603
    Thanks
    80
    Thanked 4,500 Times in 4,464 Posts
    I think that webdev missed a possible great reason for having all the same <option>s in each SELECT.

    To pick a common example, suppose that you have DEPARTUREDATE and RETURNDATE sections to your <form>.

    So when the user chooses his/her departure month, the return month is set to the same month. And then when he/she chooses a departure day, the return day is set to the same day. This is the way most airline reservation systems work. (Some assume that the return will be one day after the departure...an easy tweak to the code.)

    So clearly you *WANT* all months in both <select>s. You just want to make it easy for the user to choose the return date.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by Old Pedant View Post
    So clearly you *WANT* all months in both <select>s.
    Unless the op expands on their requirements then I have no way of knowing for sure if they need the duplicate options or not and we can go speculating in circles for ever

    The example code I posted meets the op's requirements (as posted by the op) totally. The point of my example is to show that to meet the op's requirements you don't need a duplicate set of options and you need only 1 onchange event handler.

    The example philip_m originally posted locks the selected option of the 2nd <select> to be the selected option of the 1st <select>. So if you can't select another option in the 2nd <select> after an option in the 1st <select> has been made (as in philip's code), why have redundant <options> in the 2nd <select>? That's the point I was making

    Now if the op comes back and changes the initial criteria, then this becomes a whole new ball game .
    Last edited by webdev1958; 03-19-2012 at 06:38 AM.

  • #10
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by VIPStephan View Post
    Well, in this case you could just generate the select element with JS, too. After all, what’s the semantic value of an empty select element in the document?
    That is totally correct and is in fact the way I would do it in "the real world". But I'm trying to use the KISS principle here to some extent as well

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,603
    Thanks
    80
    Thanked 4,500 Times in 4,464 Posts
    Yes, Philip's original code is most likely a mistake. Changing the second <select> almost surely shouldn't result in the change being immediately nullified.

    And I never said your code wouldn't work as you said it would. I only said you made an assumption that may or may not be valid. Note that the user did *NOT* say that he wanted the selected <option> to be the only <option> in the second list and/or that he didn't want to allow a change of <option> selection in that list. You inserted that requirement yourself. Don't forget what you get when you "assume".

    As you say, we need clarification from the original poster. And we may both be wrong in what he really wants, given the lack of detail in the original requirements.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #12
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by Old Pedant View Post
    Yes, Philip's original code is most likely a mistake.
    Maybe it is or maybe it isn't. The op's reply seems to indicate it wasn't.

    The point I was making is that if it wasn't a mistake then you don't need a duplicate set of options and you need only 1 onchange event handler and not 2
    Last edited by webdev1958; 03-19-2012 at 07:14 AM.

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,603
    Thanks
    80
    Thanked 4,500 Times in 4,464 Posts
    Yes, I did understand that point after your post #9. I did not see that was your point in your original post. I have no argument with your aims here. I am quite honestly curious as to just what the heck the original poster really wanted.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #14
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by Old Pedant View Post
    .... I did not see that was your point in your original post......
    That's ok . From some of the emails I have received since, most did see the point I was making

    The ones that didn't originally see my point had not actually run philip's original code. After they did, they saw my point
    Last edited by webdev1958; 03-19-2012 at 07:27 AM.


  •  

    Posting Permissions

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