...
PDA

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

jasonc310771
01-08-2009, 10:00 PM
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...



<!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>
rangana
01-09-2009, 07:08 AM
<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>
jasonc310771
01-09-2009, 01:58 PM
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.


<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?
jasonc310771
01-16-2009, 07:28 PM
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?

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum