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 3 of 3
  1. #1
    New Coder
    Join Date
    May 2011
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Javascript select box help

    Hi all,

    I am a newbie to JS. So please extend your help suggesstion to solve this problem I have.

    I have 2 select boxes. Data in one select box is corresponding to the data in the other select box. When the user comes in and selects example the 3rd element from the first or second select box the correspoinding 3rd element from the other select box should be selected.

    Please help with the solution.Thanks in advance

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,910
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    I don't really see the point of having two separate select lists kept in sync, but here you are:-


    Code:
    <form name = "myform">
    <select name = "sel1" onchange = "go1()">
    <option value = "1">ONE</option>
    <option value = "2">TWO</option>
    <option value = "3">THREE</option>
    </select>
    
    <select name = "sel2" onchange = "go2()">
    <option value = "1">ONE</option>
    <option value = "2">TWO</option>
    <option value = "3">THREE</option>
    </select>
    </form>
    
    <script type = "text/javascript">
    function go1() {
    var d = document.myform.sel1.selectedIndex;
    document.myform.sel2.selectedIndex = d;
    }
    function go2() {
    var d = document.myform.sel2.selectedIndex;
    document.myform.sel1.selectedIndex = d;
    }
    
    </script>
    Or do you mean just/only when the third element is selected?

    Code:
    <form name = "myform">
    <select name = "sel1" onchange = "go1()">
    <option value = "1">ONE</option>
    <option value = "2">TWO</option>
    <option value = "3">THREE</option>
    </select>
    
    <select name = "sel2" onchange = "go2()">
    <option value = "1">ONE</option>
    <option value = "2">TWO</option>
    <option value = "3">THREE</option>
    </select>
    </form>
    
    <script type = "text/javascript">
    function go1() {
    var d = document.myform.sel1.selectedIndex;
    if (d==2) {
    document.myform.sel2.selectedIndex = d;
    }
    }
    function go2() {
    var d = document.myform.sel2.selectedIndex;
    if (d==2) {
    document.myform.sel1.selectedIndex = d;
    }
    }
    </script>
    Quizmaster: What M, named after the Hebrew word for "Institution", is the national intelligence agency of Isreal?
    Contestant: Al-Qaeda.
    Last edited by Philip M; 09-28-2011 at 04:35 PM.

    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.

  • #3
    New Coder
    Join Date
    May 2011
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks a lot Philips!


  •  

    Posting Permissions

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