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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    radio buttons selecting options in drop down

    Hi, im try to write a java script that selects a differnt option in my drop down list on a click event can anyone help? heres what i have so far:

    Code:
    <script type="text/javascript">
    
    
    var three = ['UK 4 - EU 37' ];
    var four = ['UK 5 - EU 37' ];
    var five = ['UK 6 - EU 37' ];
    var six = ['UK 7 - EU 37' ];
    
    function Populate(t,IDS) {
      s = document.getElementById(IDS);
      var sl = s.options.length;
      for(var i = sl-1; i >= 0 ; i--) { s.options[i] = null; }
      var arr = [];
      switch (t.value) {
    
        case 'three' : arr = three; break;
        case 'four' : arr = four; break;
        case 'five' : arr = four; break;
        case 'six' : arr = four; break;
    	
        default  : alert('Sorry this size is not currently available, Please try a differnt boot style.'); break;
      }
      var l = arr.length;
      for(i = 0; i < l; i++ ) {
        s.options[i] = new Option(arr[i],arr[i],false,false);
      }
    }
    
    </script>
    
    <form id="aform">
    
    option 1<input type="radio" name="footsize" value="three" onClick="Populate(this,'mymenu">
    option 2<input type="radio" name="footsize" value="four" onClick="Populate(this,'mymenu')">
    option 3<input type="radio" name="footsize" value="five" onClick="Populate(this,'mymenu')">
    option 4<input type="radio"  name="footsize" value="six" onClick="Populate(this,'mymenu')">
    
    <select id="mymenu" size="1">
    <option value="nothing" selected="selected">Select a site</option>
    <option value="http://www.dynamicdrive.com">Dynamic Drive</option>
    <option value="http://www.codingforums.com">Coding Forums</option>
    <option value="http://www.cssdrive.com">CSS Drive</option>
    </select>
    </form>

  • #2
    Regular Coder mic2100's Avatar
    Join Date
    Feb 2006
    Location
    Scunthorpe
    Posts
    562
    Thanks
    15
    Thanked 28 Times in 27 Posts
    hi,

    there was a typo in the onclick for the first radio button

    Now Fixed
    Code:
    <script type="text/javascript">
    
    
    var three = ['UK 4 - EU 37' ];
    var four = ['UK 5 - EU 37' ];
    var five = ['UK 6 - EU 37' ];
    var six = ['UK 7 - EU 37' ];
    
    function Populate(t,IDS) {
      
      s = document.getElementById(IDS);
      var sl = s.options.length;
      for(var i = sl-1; i >= 0 ; i--) { s.options[i] = null; }
      var arr = [];
      switch (t.value) {
    
        case 'three' : arr = three; break;
        case 'four' : arr = four; break;
        case 'five' : arr = five; break;
        case 'six' : arr = six; break;
    	
        default  : alert('Sorry this size is not currently available, Please try a differnt boot style.'); break;
      }
      var l = arr.length;
      for(i = 0; i < l; i++ ) {
        s.options[i] = new Option(arr[i],arr[i],false,false);
      }
    }
    
    </script>
    
    <form id="aform">
    
    option 1<input type="radio" name="footsize" value="three" onClick="Populate(this,'mymenu')">
    option 2<input type="radio" name="footsize" value="four" onClick="Populate(this,'mymenu')">
    option 3<input type="radio" name="footsize" value="five" onClick="Populate(this,'mymenu')">
    option 4<input type="radio"  name="footsize" value="six" onClick="Populate(this,'mymenu')">
    
    <select id="mymenu" size="1">
    <option value="nothing" selected="selected">Select a site</option>
    <option value="http://www.dynamicdrive.com">Dynamic Drive</option>
    <option value="http://www.codingforums.com">Coding Forums</option>
    <option value="http://www.cssdrive.com">CSS Drive</option>
    </select>
    </form>
    The dropdown box now fills with the info from the array

  • #3
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    sorry that was not quite what i was trying to do i need something a bit more like this:

    Code:
    
    <form id="aform">
    
    option 1<input type="radio" name="footsize" value="three" onClick="document.aform.mymenu.value=option[0]">
    
    option 2<input type="radio" name="footsize" value="four" onclick="document.aform.mymenu.value=option[1]">
    
    option 3<input type="radio" name="footsize" value="five" onClick="document.aform.mymenu.value=option[2]">
    
    option 4<input type="radio"  name="footsize" value="six" onClick="document.aform.mymenu.value=option[3]">
    
    <select id="mymenu" size="1">
    <option value="nothing" selected="selected">Select a site</option>
    <option value="http://www.dynamicdrive.com">Dynamic Drive</option>
    <option value="http://www.codingforums.com">Coding Forums</option>
    <option value="http://www.cssdrive.com">CSS Drive</option>
    </select>
    </form>
    can anyone tell me how im meant to code this ?

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,530 Times in 2,508 Posts
    Code:
    <form id="aform">
    option 1<input type="radio"  name="footsize" value="six" onClick="document.getElementById('mymenu').value = 'nothing'">
    
    option 2<input type="radio" name="footsize" value="three" onClick="document.getElementById('mymenu').value = 'http://www.dynamicdrive.com'">
    
    option 3<input type="radio" name="footsize" value="four" onClick="document.getElementById('mymenu').value = 'http://www.codingforums.com'">
    
    option 4<input type="radio" name="footsize" value="five" onClick="document.getElementById('mymenu').value = 'http://www.cssdrive'">
    
    
    <select id="mymenu" size="1">
    <option value="nothing" selected="selected">Select a site</option>
    <option value="http://www.dynamicdrive.com">Dynamic Drive</option>
    <option value="http://www.codingforums.com">Coding Forums</option>
    <option value="http://www.cssdrive.com">CSS Drive</option>
    </select>
    </form>


    He thought he saw an Albatross
    That fluttered round the lamp:
    He looked again, and found it was
    A Penny-Postage Stamp.
    "You'd best be getting home," he said:
    "The nights are very damp!"
    - Lewis Carroll

  • #5
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thats much better thanks but what if the drop down list was populated dynamically is there a way to just select a option eg option1 option2 etc etc

  • #6
    Regular Coder
    Join Date
    Sep 2007
    Posts
    238
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Hi all,

    I'm after something similar to the original post.
    Is there a way we can also get the value set dynamically also?

    Basically I'm after 2 radio buttons that dictate the options on the drop down.
    Then for each option I need it to carry across its value which will be different to the option name e.g.

    <option value="op1">This is option1</option>

    Thanks

  • #7
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,065
    Thanks
    36
    Thanked 497 Times in 491 Posts

    Arrow

    Quote Originally Posted by htcilt View Post
    Hi all,

    I'm after something similar to the original post.
    Is there a way we can also get the value set dynamically also?

    Basically I'm after 2 radio buttons that dictate the options on the drop down.
    Then for each option I need it to carry across its value which will be different to the option name e.g.

    <option value="op1">This is option1</option>

    Thanks
    Might be better to start your own thread with a reference to this one.
    However, I added a few dummy elements for demonstration and a button to get current value set.
    Code:
    <html>
    <head>
    <title>RBtn SBox Setup</title>
    
    <script type="text/javascript">
    // From: http://codingforums.com/showthread.php?t=167230
    
    var three = ['UK 4 - EU 37' ,'4-2','4-3','4-4'];
    var four = ['UK 5 - EU 37' ,'5-1','5-2','5-3','5-4'];
    var five = ['UK 6 - EU 37' ,'6a','6b','6c'];
    var six = ['UK 7 - EU 37' ,'7b','7c','7d','7e'];
    
    function Populate(t,IDS) {
      s = document.getElementById(IDS);
      var sl = s.options.length;
      for(var i = sl-1; i >= 0 ; i--) { s.options[i] = null; }
      var arr = [];
      switch (t.value) {
    
        case 'three' : arr = three; break;
        case 'four' : arr = four; break;
        case 'five' : arr = five; break;
        case 'six' : arr = six; break;
    	
        default  : alert('Sorry this size is not currently available, Please try a differnt boot style.'); break;
      }
      var l = arr.length;
    
    // Following is option if want directions in first field of select box
      s.options[s.length] = new Option('Select','',false,false);
    
      for(i = 0; i < l; i++ ) {
    //    s.options[i] = new Option(arr[i],arr[i],false,false);
        s.options[s.length] = new Option(arr[i],arr[i],false,false);
      }
    }
    
    function CurrentValue(IDS) {
      return document.getElementById(IDS).value;
    }
    </script>
    </head>
    <body>
    <form id="aform" onsubmit="return false">
    
    option 1<input type="radio" name="footsize" value="three" onClick="Populate(this,'mymenu')">
    option 2<input type="radio" name="footsize" value="four" onClick="Populate(this,'mymenu')">
    <br>
    option 3<input type="radio" name="footsize" value="five" onClick="Populate(this,'mymenu')">
    option 4<input type="radio"  name="footsize" value="six" onClick="Populate(this,'mymenu')">
    
    <br>
    <select id="mymenu" size="1">
    <option value="nothing" selected="selected">Select a site</option>
    <option value="http://www.dynamicdrive.com">Dynamic Drive</option>
    <option value="http://www.codingforums.com">Coding Forums</option>
    <option value="http://www.cssdrive.com">CSS Drive</option>
    </select>
    <button onclick="alert(CurrentValue('mymenu'))">Current value</button>
    </form>
    </body>
    </html>
    Remove 2 of the radio button options ... Is this close to what you need?

  • Users who have thanked jmrker for this post:

    htcilt (07-14-2009)

  • #8
    Regular Coder
    Join Date
    Sep 2007
    Posts
    238
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Hi.
    Yes this is exactly what I'm after - thanks

  • #9
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,065
    Thanks
    36
    Thanked 497 Times in 491 Posts
    You're most welcome.
    Glad we could help.
    Hopefully it helps the original OP as well.
    Good Luck!


  •  

    Posting Permissions

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