Skip To Main Content | Home | Sitemap | Contact
Latest Visitors: United States's flagUnited States's flagUnited States's flagUnited States's flagUnited States's flagNetherlands's flagChina's flagSweden's flagUnited States's flagSerbia's flagChina's flagChina's flagUnited States's flagCanada's flagUnited States's flagUnited Kingdom's flagKorea  Republic of's flagUnited States's flagUnited States's flagChina's flagUnited Kingdom's flagUnited States's flagEurope's flagChina's flagSweden's flag

 How can you change a drop down list contents on some action?

Here, the event is simply a button being pushed. Possibly you would want to change the contents of one drop down list based on the selection in a previous drop down list or the checking of a check box. The concept is the same in any event.

The Code

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta name="author" content="Roderick Divilbiss">
<meta name="copyright" content="© 2005-2010 Roderick Divilbiss">

<script language="javascript" type="text/javascript">
<!--
var current=1;

function changeSelect() {
if (current==1) {
    document.getElementById('sDiv').innerHTML=
     '<select name="province" id="province" onChange="calculate()">'+
     '<option value="QC">QUEBEC</option>'+
     '<option value="ON" selected>ONTARIO</option>'+
     '<option value="BC">BRITISH COLUMBIA</option></select>';

    current=0;
}else{
    document.getElementById('sDiv').innerHTML=
     '<select name="stateForCountry" id="stateForCountry">'+
     '<option>Kansas</option>'+
     '<option>Missouri</option></select>';

    current=1;
    }
}
//-->
</script>
</head>

<body>
<div id="sDiv">
  <select name="stateForCountry">
    <option>Kansas</option>
    <option>Missouri</option>
  </select>
</div>
<br><input type="button" value="change" onclick="changeSelect();">

</body>
</html>


This Weeks Most Popular Pages Newest Pages