Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <head>
- <title>Dynamic Select Statements</title>
- <script type="text/javascript">
- var countryLists = new Array(4)
- countryLists["empty"] = ["Select a Country"];
- countryLists["North America"] = ["Canada", "United States", "Mexico"];
- countryLists["South America"] = ["Brazil", "Argentina", "Chile", "Ecuador"];
- countryLists["Asia"] = ["Bangladesh", "Russia", "China", "Japan"];
- countryLists["Europe"]= ["Britain", "France", "Spain", "Germany"];
- function countryChange(selectObj) {
- var idx = selectObj.selectedIndex;
- var which = selectObj.options[idx].value;
- cList = countryLists[which];
- var cSelect = document.getElementById("country");
- var len=cSelect.options.length;
- while (cSelect.options.length > 0) {
- cSelect.remove(0);
- }
- var newOption;
- for (var i=0; i<cList.length; i++) {
- newOption = document.createElement("option");
- newOption.value = cList[i];
- newOption.text=cList[i];
- try {
- cSelect.add(newOption);
- }
- catch (e) {
- cSelect.appendChild(newOption);
- }
- }
- }
- </script>
- </head>
- <body>
- <h1>Dynamic Select Statements</h1>
- <label for="continent">Select Continent</label>
- <select id="continent" onchange="countryChange(this);">
- <option value="empty">Select a Continent</option>
- <option value="North America">North America</option>
- <option value="South America">South America</option>
- <option value="Asia">Asia</option>
- <option value="Europe">Europe</option>
- </select>
- <br/>
- <label for="country">Select a country</label>
- <select id="country">
- <option value="0">Select a country</option>
- </select>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement