[SOLVED] Dropdown boxes & innerHTML

Andy17 · September 13, 2008

Hey guys,

I am not good at JS, since I am learning some other languages first. I have this script I found that changes the selections available in dropbox2 when you change something in dropbox1. Here is the code (I removed all the html spaces to clean it up some more):

<script type="text/JavaScript">

<!--

var aa = new Array("Jokes","Poems","Videos");
Jokes = new Array("Adult","Alcohol","Bar","Blonde","Brunette","Classic","Men","Sport","Women");
Poems = new Array("poem1","poem2","poem3");
Videos = new Array("Alcohol","Animals","Babies", "Gender", "Sports");


function changeval()
{
var val1 = document.sform.sel1.value;
var optionArray = eval(val1);
for(var df=0; df<optionArray.length; df++)
{
  var ss = document.sform.sel2;
  ss.options.length = 0;
  for(var ff=0; ff<optionArray.length; ff++)
  {
   var val = optionArray[ff];
   ss.options[ff] = new Option(val,val);
  }
}
}

//-->

</script>



Category: *

<form name="sform" method="post">
<select name=sel1 onchange=changeval()>
<script language=javascript>
for(var dd=0; dd<aa.length; dd++)
{
document.write("<option value=\""+aa[dd]+"\">"+aa[dd]+"</option>");
}
</script>
</select>



Sub-category: *
// These selections are displayed in dropbox2 when you load the page
<select name=sel2>
<option>Adult</option>
<option>Alcohol</option>
<option>Bar</option>
<option>Blonde</option>
<option>Brunette</option>
<option>Classic</option>
<option>Men</option>
<option>Sport</option>
<option>Women</option>
</select>

// These are the fields I want to be displayed ONLY when "Jokes" or "Poems" is selected in the first dropbox. Otherwise, I'd like some other HTML fields to be displayed
Title: * <input type="text" name="title" maxlength="35">
Text: * <textarea name="text" style="width: 400px; height: 200px;"></textarea>

// This button should always be displayed, obviously
<input type="submit" value="Submit"> 

</form>

It works, but what I want to do is to show the "Title" and "Text" fields when "Jokes" or "Poems" are selected in the first dropbox and then show some other HTML fields when "Videos" (or "something_else") is selected in the first dropbox. I assume you'd need want to use innerHTML for this, but I have very little experience in JS, so I wouldn't know.

If anyone could help me out, that'd be great - and please write me some code if you know how to code it. I hope you understand what I'm looking to do with too.

Thanks A LOT in advance!

Psycho · September 13, 2008

<html>
<head>

<script type="text/JavaScript">

<!--

var categoryAry = new Array("Jokes","Poems","Videos");
var subCatAry = new Array ();
subCatAry['Jokes']  = new Array('Adult', 'Alcohol', 'Bar', 'Blonde', 'Brunette', 'Classic', 'Men', 'Sport', 'Women');
subCatAry['Poems']  = new Array('poem1', 'poem2', 'poem3');
subCatAry['Videos'] = new Array('Alcohol', 'Animals', 'Babies', 'Gender', 'Sports');

function changeCategoryOptions()
{
  sel1Obj = document.getElementById('sel1');
  changeOptions(sel1Obj, categoryAry);
  changeSubCatOptions(sel1Obj);
}

function changeSubCatOptions(sel1Obj)
{
  changeOptions(document.getElementById('sel2'), subCatAry[sel1Obj.value]);

  for (var i=0; i<categoryAry.length; i++)
  {
    if (inputDiv = document.getElementById(categoryAry[i]+'_Input'))
    {
      inputDiv.style.display = (categoryAry[i]==sel1Obj.value)?'inline':'none';
    }
  }
}

function changeOptions(fieldObj, valuesAry)
{
  fieldObj.options.length = 0;

  for (var i=0; i<valuesAry.length; i++)
  {
    fieldObj.options[i] = new Option(valuesAry[i], valuesAry[i]);
  }
}
//-->

</script>
</head>

<body onload="changeCategoryOptions();";>

<form name="sform" method="post">

Category: *
<select name="sel1" id="sel1" onchange="changeSubCatOptions(this);"></select>
<br>

Sub-category: *
<select name="sel2" id="sel2"></select>
<br><br>

<div id="Jokes_Input">
Joke Title: * <input type="text" name="title" maxlength="35"><br>
Joke Text: * <textarea name="text" style="width: 400px; height: 200px;"></textarea>
</div>
<div id="Poems_Input">
Poem Title: * <input type="text" name="title" maxlength="35"><br>
Poem Text: * <textarea name="text" style="width: 400px; height: 200px;"></textarea>
</div>

<br><input type="submit" value="Submit"> 

</form>

</body>
</html>

Andy17 · September 14, 2008

Thank you so much, that works perfectly! <3

Highly appreciated, dude!

Sign In

[SOLVED] Dropdown boxes & innerHTML

Recommended Posts

Andy17

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Andy17

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information