www.webdeveloper.com
Results 1 to 5 of 5

Thread: dynamically populating dropdown lists based on selection in another dropdown

  1. #1
    Join Date
    Jan 2007
    Posts
    3

    dynamically populating dropdown lists based on selection in another dropdown

    Hi,

    I am new to javascript and new to this site as well..I am developing a webapplication using Javascript,JSP,Servlets. I have 2 dropdown lists in my form, the first one is autopopulated on form load , I have written this code in Jsp and its working as well, but now I want that once a user selects an option from the 1stDD then immediately the 2nd DD should be populated depending on the selection made....
    The 1stDD uses a diff table and so does the 2ndDD , however their records are tied with a foreign key ..everytime the selected-option of 1stDD changes I need the 2ndDD to be auto-populated with refreshed values...how can I achieve this, any suggestions?

    Thanks,

  2. #2
    Join Date
    May 2006
    Posts
    58
    Here you go. Just copy the whole page to a new document and try it out. Basically, you just need to create a function that creates an array of what you want, then puts it in the select list. Enjoy.

    Code:
    <html>
    
    <head>
    <script language="JavaScript">
    function getOptions(beertype) {
    	var list;
    	var listValue;
    	if (beertype == "Lager") {
    		list = new Array("Budweiser","Coors","Longboard","Miller Genuine Draft","Heineken");
    		listValue = new Array("Budweiser","Coors","Longboard","Miller Genuine Draft","Heineken");
    	}
    	if (beertype == "Ale") {
    		list = new Array("Bridgeport IPA","Red Hook ESB","Alaskan Amber","Widmer Hefewiezen");
    		listValue = new Array("Bridgeport IPA","Red Hook ESB","Alaskan Amber","Widmer Hefewiezen");
    	}
    	if (beertype == "Porter") {
    		list = new Array("Black Butte","Pete's Wicked","Guiness");
    		listValue = new Array("Black Butte","Pete's Wicked","Guiness");
    	}
    	for (var i = 0; i < document.OptionMaker.BeerType.length; i++) { //Clear the 2nd menu
    		document.OptionMaker.Brand.options[i] = null;
    	}
    	for (var i = 0; i < list.length; i++) { //Repopulate 2nd menu
    		document.OptionMaker.Brand.options[i] = new Option(list[i],listValue[i],0,0);
    	}
    }
    </script>
    <title>Dynamic Options</title>
    </head>
    
    <body>
    
    <form name="OptionMaker">
      <p><select size="10" name="BeerType" onchange="getOptions(this.value)">
        <option value="Lager">Lager</option>
        <option value="Ale">Ale</option>
        <option value="Porter">Porter</option>
      </select>&nbsp;&nbsp;&nbsp;&nbsp; <select size="10" name="Brand" onclick="alert(this.value)">
      </select></p>
    </form>
    
    </body>
    
    </html>

  3. #3
    Join Date
    Jan 2007
    Posts
    3
    Hi,
    Thnku fr ur suggestion.

    My code is working now,there was a problem since the values which I was trying to populate wr to be obtained at runtime frm 2 diff tables, so I used a couple of hidden fields one for each table.

    For eg say on selecting a particular Bank frm 1stDD I need to see its branches in the 2nd DD:

    On every page-load the records frm the corresponding table get stored in the form of a string in the hidden field.
    This string is in the format #ID~BankName frm 1st table and stored in 1st hidden field and #ID~BrName frm second table in the second hidden field, so that later I cn take out individual fields from this strings using split()

    On the change-event of the 1stDD I take the option(ie:BankName) selected by the user into a 'temp' variable and call a function whr I m comparing this val with the Bank-names stored in the 1st hidden field , if thres a match then I take out the ID for the same record and compare it one by one with the ID of the records stored in the 2nd hidden field, if thrs a match here as well then I take out the BranchName from that record and simply add it as an option to the 2nd DD..

  4. #4
    Join Date
    May 2006
    Posts
    58
    Wow, that's a convoluted way to do it....whatever work. Mine is pretty simple.

  5. #5
    Join Date
    Jan 2007
    Posts
    3
    Hi,

    Yes ur way is definitely much simpler,but it was not possible to hardcode all the values in the script..since we r getting these values directly from the database tables , its a web-application so the records might get added/deleted or updated at the server side and those changes need to be reflected in the dropdown boxes at the client side. As of now I'm using Jsp scriptlets to fire the query to get the values from the database into the hidden-fields and then the preocessing is done using a series of nested for-loops and if - conditions.

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