Andy17 Posted October 11, 2008 Share Posted October 11, 2008 Hey guys, I have this script where one dropbox (sel1) changes the content of another dropbox (sel2), plus HTML content. I was wondering if anyone could please help me adjusting this to just changing HTML content from one dropbox? Like the HTML changes depending on what the user selected in the dropdown box. Here is the JavaScript part: <script type="text/JavaScript"> <!-- var categoryAry = new Array("Jokes", "Pictures", "Poems", "Videos"); var subCatAry = new Array (); subCatAry['Jokes'] = new Array('Adult', 'Alcohol', 'Bar', 'Blonde', 'Brunette', 'Classic', 'Men', 'Sports', 'Women'); subCatAry['Pictures'] = new Array('Alcohol', 'Animals', 'Babies', 'Genders', 'Sports'); subCatAry['Poems'] = new Array('Fun & Humor', 'Friendship', 'Life', 'Love & Romance', 'Nature', 'Sadness'); subCatAry['Videos'] = new Array('Alcohol', 'Animals', 'Babies', 'Genders', '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> And the HTML part: <body onload="changeCategoryOptions();";> <form name="sform" method="post"> Category: <br> <select name="sel1" id="sel1" tabindex="1" onchange="changeSubCatOptions(this);"></select> <br><br> Sub-category: <br> <select name="sel2" tabindex="2" id="sel2"></select> <br><br> <div id="Jokes_Input"> Joke Title: <br><input type="text" name="joketitle" tabindex="3" maxlength="35" size="24"<br><br> Joke Text: <br><textarea name="joketext" tabindex="4" maxlength="1500" style="width: 400px; height: 200px;"></textarea> </div> <div id="Pictures_Input"> Picture Title: <br><input type="text" name="picturetitle" tabindex="3" maxlength="35" size="24"><br><br> Picture URL: <br><input type="text" name="pictureurl" tabindex="4" maxlength="100" size="40"> </div> <div id="Poems_Input"> Author: <br><input type="text" name="author" maxlength="35" tabindex="3" size="24" value="Unknown"><br><br> Poem Title: <br><input type="text" name="poemtitle" maxlength="35" tabindex="4" size="24"><br><br> Poem Text: <br><textarea name="poemtext" style="width: 400px; height: 200px;"></textarea> </div> <div id="Videos_Input"> Video Title: <br><input type="text" name="videotitle" maxlength="35" tabindex="3" size="24"><br><br> Video code: <br><textarea name="videocode" tabindex="4" style="width: 400px; height: 200px;"></textarea> </div> <br><br> <input type="submit" value="Submit"> </form> Thanks A LOT in advance! Quote Link to comment Share on other sites More sharing options...
Andy17 Posted October 14, 2008 Author Share Posted October 14, 2008 bump Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.