www.webdeveloper.com
Results 1 to 4 of 4

Thread: Need help with javascript code for html manipulation

  1. #1
    Join Date
    Jun 2014
    Posts
    2

    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
    Location
    FL
    Posts
    7,373

    Question

    Quote Originally Posted by blacksmoke90 View Post
    ...
    I hope this is clear enough.
    Nope.
    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
    Posts
    2
    Ok here's a link to a test page I've created
    http://www.allaboutfood.co.za/index....ormmaker&id=21

    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
    Location
    FL
    Posts
    7,373

    Lightbulb

    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...

    Code:
    <!doctype html>
    <html lang="en">
    <head>
    <title> 1- to 4-level Drop Down</title>
    <meta charset="UTF-8">
    
    <style type="text/css">
    .DDlist { display:none; }
    </style>
    
    <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]); 
          nOption.setAttribute('value',nCat[each]); 
          nOption.appendChild(nData); 
          currList.appendChild(nOption); 
        }
      } 
    }
    
    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'; }
      }
      alert(str); 
    }
    
    function init() { fillSelect('startList',document.forms[0]['List1']); }
    
    navigator.appName == "Microsoft Internet Explorer"
       ? attachEvent('onload', init, false) 
    		   : addEventListener('load', init, false);	
    
    </script>
    </head>
    <body>
    <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>
    </form>
    </body>
    </html>
    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