www.webdeveloper.com
Results 1 to 3 of 3

Thread: dynamically changing the List Box on change of Combo Box

  1. #1
    Join Date
    Dec 2003
    Posts
    1

    dynamically changing the List Box on change of Combo Box

    I have one combo box which has its elements in client sside.

    Then I have another selection box(multiple selection) down below.



    Evey item in the parent combo box has its corresponding child OPTIONS which I want to show in the child box when I change the options in parent box.
    How do u do it in javascript.

  2. #2
    Join Date
    Oct 2003
    Location
    SE England
    Posts
    247
    I posted a code for this a while ago, I'll find it for you and put it up here in a minute.

  3. #3
    Join Date
    Oct 2003
    Location
    SE England
    Posts
    247
    frameset.html
    <frameset cols=*,*>
    <frame name="left" src="toggle2.html">
    <frame name="right" src="toggle.html">
    </frameset>

    toggle.html
    <HTML>
    <HEAD>
    <script type="text/javascript">
    <!--
    parent.frames.left.document.onclick = setlists;
    function setlists() {
    if(parent.frames.left.document.f.rad[0].checked) setlist0();
    if(parent.frames.left.document.f.rad[1].checked) setlist1();
    }

    function setlist0() {
    with ( document.f.s.options[0] ) {
    selected=true; text="Select item..."; value="";
    }
    with ( document.f.s.options[1] ) {
    text="Item 1a"; value="";
    }
    with ( document.f.s.options[2] ) {
    text="Item 1b"; value="";
    }
    with ( document.f.s.options[3] ) {
    text="Item 1c"; value="";
    }
    }

    function setlist1() {
    with ( document.f.s.options[0] ) {
    selected=true; text="Select item..."; value="";
    }
    with ( document.f.s.options[1] ) {
    text="Item 2a"; value="";
    }
    with ( document.f.s.options[2] ) {
    text="Item 2b"; value="";
    }
    with ( document.f.s.options[3] ) {
    text="Item 2c"; value="";
    }
    }
    //-->
    </script>
    </HEAD>
    <BODY>
    <form name="f">
    <input type="radio" name="rad" onclick="setlists()">
    List 1<BR>
    <input type="radio" name="rad" onclick="setlists()">
    List 2<BR><BR>
    <select name="s">
    <option value="" selected>Select list</option>
    <option value=""></option>
    <option value=""></option>
    <option value=""></option>
    </select><BR><BR>
    </form>
    </BODY>
    </HTML>

    toggle2.html
    <form name="f">
    <input type="radio" name="rad">
    List 1<BR>
    <input type="radio" name="rad">
    List 2<BR><BR>
    </form>

    Here's some code for a version that uses frames. Is this the sort of thing you want? If so, I can work out the version without frames for you.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles