0

i want to populate drop down box values on the basis of other drop down box value dynamically(without refreshing the page) using java script. i tried to search on google, but could not find anything. please can anybody help me in this regards.

Thanks

3
Contributors
3
Replies
5
Views
7 Years
Discussion Span
Last Post by servis
0

This can be achieved if you prefer using AJAX in your page. To get the basic of it, here's a simple demo for you.
This example comes in 2 separated html document: the main.html which holds the entire script, and the request.html that holds another options and will be injected to the main.html upon request.
Here's the code for the main.html:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>JavaScript Demo</title>
<script type="text/javascript">
// <![CDATA[
/* No editing required -
   For demonstrational purposes only. */


// Declaring variables
var ajax, update, xmlData, getOptions;
var obj, select, option;

// This is a simple prototype that will skip the long declaration of ( element.getElementsByTagName( tagName )[reference] ).
// And now can be defined as element.obj( tagName, reference )
obj = Object.prototype.obj = function( tn, ref ) {
   if (( tn ) && ( typeof ref === "number" ) && ( ref !== null )) {
   return ( this.getElementsByTagName( tn )[ ref ] );
   } else {
   return (  this.getElementsByTagName( tn ));
   } 
};

// This is the function reference which is the one who handle's and process the request sent by the XMLHttpRequest object.

// And considered as the most important part of the whole program. 
getOptions = function() {
select = xmlData.responseXML.obj("select", 0)
option = select.obj("option");
oLen = option.length;
   for ( x = 0; x < oLen; x++ ) { document.obj("select")["lists"].remove( x );
document.obj("select")["lists"].add( new Option( option[x].childNodes[0].nodeValue,  option[x].getAttribute("value") ), x );
   }
};

ajax = function ( url ) {
xmlData = null;
   if ( window.XMLHttpRequest ) {
   xmlData = new XMLHttpRequest();
   } else if ( window.ActiveXObject ) {
      try {
      xmlData = new ActiveXObject("Microsoft.XMLHTTP");
      } catch( e ) {
          xmlData = new ActiveXObject("Msxml2.XMLHTTP");
      }
   }
   if ( xmlData !== null ) {
   xmlData.onreadystatechange = getOptions; 
   xmlData.open("GET", url, true);
   xmlData.send( null );
   } else {
     alert("\nYour browser does not support AJAX Request!"); 
   }
};

update = function( sel ) {
sel = ( document.getElementById ) ? document.getElementById( sel ) : document.all.sel;

index = sel.selectedIndex;

ajax( sel.options[index].value );
return;
}
// ]]>
</script>
</head>
<body>
<div id="content">
<form id="ajaxForm" action="#" onsubmit="return false;">
<div>
<select id="lists" name="lists" size="1" onchange="update( this.id );">
<option value="">Default List</option>
<option value="">Default List</option>
<option value="">Defaut List</option>
<option value="request.html">AJAX Demo - Request Lists!</option>
</select>
</div>
</form>  
</div>
</body>
</html>

And this goes for the request.html

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Request Page</title>
</head>
<body>
<div id="content">
<form id="frm" action="*" onsubmit="return false;">
<div>
<select id="sel" name="sel" size="1" onchange="ajax.listed(this.id);">
<option value="">Requested List</option>
<option value="">Requested List</option>
<option value="">Requested List</option>
<option value="main.html">AJAX Demo - Default Page!</option>
</select>
</div>
</form>
</div>
</body>
</html>

Hope you find it useful...

0

Let you have two combo one is for supplier & another one is for products. When user select a supplier then you wants populate product combo. Am i right?

<select name="supplier" onchange="products(this)">
.................................................................................

NOW WRITE THE products METHOD LIKE:

function products(supplier) {
    var prodcombo = supplier.form.elements["productcombo name"];
//remove previous data    
while (prodcombo.options.length) {
        prodcombo.remove(0);
    }
    var choice = supplier.options[supplier.selectedIndex].value;
................................................
// Now you got both combo. So populate.....
}
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.