troubleshooting Question

Generate HTML Drop Down List Using javabean data and javascript or AJAX

Avatar of ofonck
ofonck asked on
Web Languages and StandardsJSPJava EEAJAX
8 Comments4 Solutions3027 ViewsLast Modified:
Well i have some data that i read from database trought java servlets and store it in javabeans models, i want with this data create dynamic html drop down list, i know how to manipulate dynamic html drop down lists using javascript and js arrays example:
var _array = [ ["a","Option 1"],["b","option 2"]];
ok, but how i can use javabean with javascript, or how i create the array in javascript from javabean the data, i can't ready to database from javascript that's not allowed for security policies of server, only way to get data is with java servlets, and then somehow pass that data to javascript to manipulate the dynamics html selects,
first i select a country and have to filter brands by country, then i select brand and have to filter versions by brand of that country.
If someone have and idea idea or a concrete example, please give your answer.
i have these javabeans in my jsp:
<jsp:useBean id="countries" type="java.util.ArrayList" scope="request"/>
<jsp:useBean id="brands" type="java.util.ArrayList" scope="request"/>
<jsp:useBean id="versions" type="java.util.ArrayList" scope="request"/>
 
to generate list of Countries i use this java code:
<div>
            <label for="countryId">Country</label>
            <select id="countryId" name="countryId" onchange="LoadBrandbyCountry(document.myform.countryId.options[document.myform.countryId.selectedIndex].value);">
                <option value=" " selected="selected"> </option>
                <% rows = countries.toArray(); %>
                <% for ( int i = 0; i < rows.length; i++ ) { %>
                <% ccd.models.Lookup row = (ccd.models.Lookup) rows[i]; %>
                <option value="<%= row.getId() %>">
                    <%= row.getName() %>
                </option>
                <% } %>
            </select>
        </div>
<div>
            <label for="brandId">Brand</label>
            <select id="brandId" name="brandId" onchange="LoadVersionbyBrand(document.myform.brandId.options[document.myform.brandId.selectedIndex].value);">
            </select>
        </div>         
        <div>
            <label for="versionId">Version</label>
            <select id="versionId" name="versionId">
            </select>            
        </div>
the javascript LoadBrandbyCountry() and LoadVersionbyBrand, loads brand and country from a javascript array like var _array = [ ["a","Option 1"],["b","option 2"]]; NOT a dabatase, because i don't know yet how to pass data from java to javascript
the codes of the javascript functions are:
 
function LoadBrandbyCountry( chosen )
{
    var selbox = document.myform.brandId;
    var selbox1 = document.myform.versionId;
    var selboxD = document.myform.hackDistributor;
    //var selbox2 = document.myform.txtVersion;
    selbox.options.length = 0;
    selbox1.options.length = 0;
    selboxD.options.length = 0;
 
    selbox.options[selbox.options.length] = new Option(_Brands[0][2],_Brands[0][1]);
    selbox1.options[selbox1.options.length] = new Option(_Version[0][2],_Version[0][1]);
    selboxD.options[selboxD.options.length] = new Option(_Distributor[0][2],_Distributor[0][1]);
    for (i=0;i<_Brands.length;i++){
	if (_Brands[i][0]==chosen){
            selbox.options[selbox.options.length] = new Option(_Brands[i][2],_Brands[i][1]);
        }
    }
	//this another list that i update for countries and is in manual array also
    for (i=0;i<_Distributor.length;i++){
        if (_Distributor[i][0]==chosen){
                selboxD.options[selboxD.options.length] = new Option(_Distributor[i][2],_Distributor[i][1]);
        }
    }
}
 
function LoadVersionbyBrand(chosen) {
    var selbox = document.myform.versionId;
 
    selbox.options.length = 0;
    selbox.options[selbox.options.length] = new Option(_Version[0][2],_Version[0][1]);
    for (i=0;i<_Version.length;i++){
          if (_Version[i][0]==chosen)
          selbox.options[selbox.options.length] = new Option(_Version[i][2],_Version[i][1]);
    }
}
ASKER CERTIFIED SOLUTION
Kuldeepchaturvedi

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 4 Answers and 8 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 4 Answers and 8 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros