www.webdeveloper.com
Results 1 to 4 of 4

Thread: Dynamic Drop Down Boxes

  1. #1
    Join Date
    Jan 2013
    Location
    London, UK (Originally Vancouver)
    Posts
    10

    Wink Dynamic Drop Down Boxes

    Hello all,

    I have an understanding of how to create a dynamic drop down box using a switch statement and arrays to populate it. What I do not know how to do is use multiple drop down information to filter information etc.

    This is what I have so far...

    The HTML...

    HTML Code:
    <body>
    
    <select name="brand" id="brand" onchange="fillPhones()">
    	<option>Select</option>
        <option value="samsungPhones">Samsung</option>
        <option value="applePhones">Apple</option>
        <option value="nokiaPhones">Nokia</option>
    </select>
    
    <br /><br />
    
    <select name="phones" id="phones" style="width: 120px"></select>
    
    <br /><br />
    
    </body>
    The JavaScript...

    PHP Code:

    function fillPhones()
    {
        
    //clears dropdowns and price
        
    phones.options.length 0;
        
        
    //retrieves index of selected phone brand and target element to be populated
        
    var document.getElementById("phones");
        var 
    brand document.getElementById("brand").selectedIndex
        
        
    //switch statements fill target with phone array
        
    switch (brand)
        {
            case 
    1:
                var 
    arr = new Array("Select...""Galaxy S3""Galaxy Note");
                
    fillList(arre);
                break;
            
            case 
    2:
                var 
    arr = new Array("Select...""iPhone 5""iPhone 4S");
                
    fillList(arre);
                break;
            
            case 
    3:
                var 
    arr = new Array("Select...""Lumia 920""Lumia 800");
                
    fillList(arre);
                break;
        }
    }

    //function to populate dropdown list
    function fillList(arre)
    {    
        
    e.options.length 0;
        for (var 
    0arr.lengthi++)
        {
            
    option = new Option(arr[i], arr[i]);
            
    e.options[i] = option;
        }

    I would be looking to add another two dynamic drop down boxes but not sure how?

  2. #2
    Join Date
    Jan 2013
    Location
    London, UK (Originally Vancouver)
    Posts
    10
    Can anyone help at all?

    Cheers

  3. #3
    Join Date
    Dec 2012
    Posts
    52
    Dynamic Drop Down Boxes:

    <link rel="stylesheet" type="text/css" href="flexdropdown.css" />

    <script type="text/javascript" src="http://ajax[dt]googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

    <script type="text/javascript" src="flexdropdown.js">

    </script>

  4. #4
    Join Date
    Jan 2013
    Location
    London, UK (Originally Vancouver)
    Posts
    10
    Can it not be done using only javascript switch statement and not jQuery?

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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