Results 1 to 4 of 4

Thread: Need help with javascript code for html manipulation

  1. #1
    Join Date
    Jun 2014

    Need help with javascript code for html manipulation

    Hello there...

    Finally some folks in the same time zone as me...

    I am busy with a project in joomla where I have a third party extension installed for creating html forms.

    Here's exactly what I need help with...
    If a user selects Value 1 from selectbox with id="selectbox1" it needs to replace all the other values in selectbox2 except two or three values the user needs to make a selection from

    So that's basically an if statement with conditions upon return value. it should be done when the user selects value 1 from selectbox1 then it should replace all the strings in select box 2 and if value 2 is selected from selectbox 1 it should replace all the strings except the ones required for selectbox 2's selection, I already know what the strings are obviously I just need the text to be available according to the main selection in selectbox1.

    I hope this is clear enough.

  2. #2
    Join Date
    Dec 2005


    Quote Originally Posted by blacksmoke90 View Post
    I hope this is clear enough.
    Can you provide an example of selections available and what would happen when the user chooses one or more in the sequence of events.

  3. #3
    Join Date
    Jun 2014
    Ok here's a link to a test page I've created

    When you Select option 1 in the select box it shows another select box and if you click option 1 again in the secondary box
    it shows a third selectbox, now what I need is when a user selects option 1 in the secondary selectbox it should only display the options needed for that specifiic selection in other words. if a user selects option 1 in the secondary selectbox it should only show select value and option 1 in the third select box 'option 2' should be hidden, but if a user maybe selects option 2 in the secondary select box then option1 and option2 should be available and select value should be hidden.

    Sorry about that, should've done this earlier then maybe I would've gotten better responses

  4. #4
    Join Date
    Dec 2005


    I don't see any select box options viewable on the link you provided.

    I'm taking a guess here and giving a SWAG solution to your request...

    <!doctype html>
    <html lang="en">
    <title> 1- to 4-level Drop Down</title>
    <meta charset="UTF-8">
    <style type="text/css">
    .DDlist { display:none; }
    <script type="text/javascript">
    // From: http://www.codingforums.com/showthread.php?t=202456
    // and: http://www.codingforums.com/showthread.php?t=169465
    // Modified for 1 to 4 (+) level drop down selections
    var categories = [];
      categories["startList"] = ["Apparel","Books",'Radio','True','False'];        // Level 1  (True|False is 1 level only)
        categories["Apparel"] = ["Men","Women"];                         // Level 2
          categories["Men"] = ["Shirts","Ties","Belts"];                    // Level 3
            categories['Shirts'] = ['Tux','Button-down','Polo',"T's"]         //  Level 4
            categories['Ties'] = ['Silk','String','Bow']                      //  Level 4
            categories['Belts'] = ['Leather','Cloth']                         //  Level 4
          categories["Women"] = ["Blouses","Skirts","Scarves"];             // Level 3
            categories["Blouses"] = ["Silk","Cotton","Polyester"];             // Level 4 only
            categories["Skirts"] = ["Full","Pleated"];                         // Level 4 only
            categories["Scarves"] = ["Head","Neck","Waist"];                   // Level 4 only
        categories["Books"] = ["Biography","Fiction","Nonfiction"];      // Level 2
          categories["Biography"] = ["Contemporary","Historical","Other"];  // Level 3 only
          categories["Fiction"] = ["Science","Romance"];                    // Level 3 only
          categories["Nonfiction"] = ["How-To","Travel","Cookbooks"];       // Level 3 only
        categories['Radio'] = ['AM','FM','HD'];                          // Level 2 only
    var nLists = 4; // number of lists in the set
    function fillSelect(currCat,currList){
      var step = Number(currList.name.replace(/\D/g,""));
      for (i=step; i<nLists+1; i++) {
        document.forms[0]['List'+i].length = 1;
        document.forms[0]['List'+i].selectedIndex = 0;
        document.getElementById('List'+i).style.display = 'none';
      var nCat = categories[currCat];
      if (nCat != undefined) { 
        document.getElementById('List'+step).style.display = 'inline';
        for (each in nCat) 	{
          var nOption = document.createElement('option'); 
          var nData = document.createTextNode(nCat[each]); 
    function getValues() { 
      var str = '';
      str += document.getElementById('List1').value+'\n';
      for (var i=2; i<=nLists; i++) {
        if (document.getElementById('List'+i).selectedIndex != 0) {
          str += document.getElementById('List'+i).value+'\n'; }
    function init() { fillSelect('startList',document.forms[0]['List1']); }
    navigator.appName == "Microsoft Internet Explorer"
       ? attachEvent('onload', init, false) 
    		   : addEventListener('load', init, false);	
    <form action="" onsubmit="return false">
    <select name='List1' id="List1" onchange="fillSelect(this.value,this.form['List2'])">
    <option selected>Make a selection</option>
    </select> &nbsp;
    <select name='List2' id="List2" onchange="fillSelect(this.value,this.form['List3'])" class="DDlist">
    <option selected>Make a selection</option>
    </select> &nbsp;
    <select name='List3' id="List3" onchange="fillSelect(this.value,this.form['List4'])" class="DDlist">
    <option selected >Make a selection</option>
    </select> &nbsp;
    <select name='List4' id="List4" class="DDlist">
    <option selected >Make a selection</option>
    </select> &nbsp;
    <!-- can add more levels if desired as "List5"+ -->
    <button onclick="getValues()">Show selections</button>
    Can you use this to solve your problem?
    If not, what changes would be required?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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

Recent Articles