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
    Regular Coder
    Join Date
    Mar 2006
    Posts
    478
    Thanks
    3
    Thanked 0 Times in 0 Posts

    selecting option on menu A changes the options available in menu B

    Please can someone help me here as i have no idea what i need to do or where to start.

    this is the method i as trying to do...


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    
    <body>
    <form name="form2" method="post" action="">
      <p>
        <select name="select1">
          <option value="L1 - VALUE 1">L1 - OPT 1</option>
          <option value="L1 - VALUE 2">L1 - OPT 2</option>
          <option value="L1 - VALUE 3">L1 - OPT 3</option>
        </select>
      </p>
    
    
    
    
    <? // if OPT 1 is selected in the select1 pulldown then the following is placed the select2 options ?>
      <p>
        <select name="select2-1">
          <option value="L2 - VALUE 1">L2 - OPT 1</option>
          <option value="L2 - VALUE 2">L2 - OPT 2</option>
          <option value="L2 - VALUE 3">L2 - OPT 3</option>
        </select>
      </p>
    
    
    
    
    <? // if OPT 2 is selected in the select1 pulldown then the following is placed the select2 options ?>
      <p>
        <select name="select2-2">
          <option value="L3 - VALUE 1">L3 - OPT 1</option>
          <option value="L3 - VALUE 2">L3 - OPT 2</option>
          <option value="L3 - VALUE 3">L3 - OPT 3</option>
        </select>
      </p>
    
    
    
    
    <? // if OPT 3 is selected in the select1 pulldown then the following is placed the select2 options ?>
      <p>
        <select name="select2-3">
          <option value="L4 - VALUE 1">L4 - OPT 1</option>
          <option value="L4 - VALUE 2">L4 - OPT 2</option>
          <option value="L4 - VALUE 3">L4 - OPT 3</option>
        </select>
      </p>
    </form>
    </body>
    </html>

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Code:
    <script type="text/javascript">
    window.addEventListener?window.addEventListener('load',function(){
    	ray.init();
    },false):window.attachEvent('onload',function()	{
    	ray.init();
    }); // FF: IE
    	
    var ray={
    	clone:'',
    	
    	init:function(){
    		var opt = document.form2.select1; // Select1 dropdown
    		var clone = document.form2.select2; // Select2 dropdown
    		this.clone=this.clone==''?clone:this.clone;
    		opt.onchange=function(){
    			ray.setOpt(this.value=='L1 - VALUE 3'?4:this.value=='L1 - VALUE 2'?3:2);
    		}
    	},
    
    	setOpt:function(base){
    		var HTML='';
    		for(var i=1;i<=3;i++)
    			HTML+='<option value="L'+base+'" - VALUE '+i+'>L'+base+' - OPT '+i+'</option>';
    		ray.clone.innerHTML=HTML;
    	}
    }
    </script>
    <form name="form2" method="post" action="">
      <p>
        <select name="select1">
          <option value="L1 - VALUE 1">L1 - OPT 1</option>
          <option value="L1 - VALUE 2">L1 - OPT 2</option>
          <option value="L1 - VALUE 3">L1 - OPT 3</option>
        </select>
      </p>
    
      <p>
        <select name="select2">
          <option value="L3 - VALUE 1">L3 - OPT 1</option>
          <option value="L3 - VALUE 2">L3 - OPT 2</option>
          <option value="L3 - VALUE 3">L3 - OPT 3</option>
        </select>
      </p>
    </form>
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #3
    Regular Coder
    Join Date
    Mar 2006
    Posts
    478
    Thanks
    3
    Thanked 0 Times in 0 Posts
    i got the idea what is going on with this script.

    but just as i started to add in my mysql queries i realised that javascript might not be able to get data from it afterall.

    so with that i have provided the two existing pull down parts of my code.

    Code:
    <select name="categoryid"><? // get category_id
    $get_category_titles = mysql_query("SELECT * FROM `forum_category` WHERE `confirmed` = '1' ORDER BY `created_on` DESC");
    $get_topic_titles = mysql_query("SELECT * FROM `forum_topics` WHERE `confirmed` = '1' ORDER BY `created_on` DESC");
    
    for ($i = 0; $i < mysql_num_rows($get_category_titles); $i ++) { ?><option<?
    if ($posts['categoryid'] == mysql_result($get_category_titles, $i, 'category_id')) {echo(" selected");} ?> value="<?=mysql_result($get_category_titles, $i, 'category_id');?>"><?=mysql_result($get_category_titles, $i, 'category');?></option><?
    } ?></select>
    
    
    <select name="topicid"><? // get topics
    for ($i = 0; $i < mysql_num_rows($get_topic_titles); $i ++) {
    ?><option<? if ($posts['topicid'] == mysql_result($get_topic_titles, $i, 'topic_id')) {echo(" selected");}
    ?> value="<?=mysql_result($get_topic_titles, $i, 'topic_id');?>"><?=mysql_result($get_topic_titles, $i, 'topic');?></option><?
    } ?></select>
    if the category pull down menu is changed then the list in the topics pull down menu changes to show the topics that are in that category chosen. all data is got from the mysql database.

    there maybe a lot of categories and topics in the furture, just in case that may help in creating a method to prevent the code needing changing again in the future, due to taking too long or something?
    Last edited by jasonc310771; 01-09-2009 at 02:02 PM.

  • #4
    Regular Coder
    Join Date
    Mar 2006
    Posts
    478
    Thanks
    3
    Thanked 0 Times in 0 Posts
    sorry for the bump

    i thought i'd leave it for a while before asking again in case anyone may have been working on something.

    has anyone got any ideas how i can get the code to work where it gets data from the mysql using javascript?


  •  

    Posting Permissions

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