Select box help please

JavaScript
1

I haven’t done any of this for years (more than 10). I was never that good but now I’m totally lost on small things.

Below is my script, when it loads you see a select box with “Queensland” in it. based on the state you pick a second select box fills with cities. Problem is Queensland is the default and the second select box should already be filled with Queensland cities, but its not. Then if you open the select box you cant pick Queensland unless you pick another state first. Another words, I have totally stuffed up.

Could some show me where I have gone wrong, I was never good with functions

Script:

<!DOCTYPE html>
<html>
<body>   

<select id="state" onchange="ChangeCityList()"> 
  <option value="qld">Queensland</option> 
  <option value="nsw">NSW</option> 
  <option value="vic">Victoria</option> 
  <option value="sa">South Australia</option> 
  <option value="wa">Western Australia</option> 
  <option value="tas">Tasmania</option> 
  <option value="act">ACT</option>
   <option value="nt">Northern territory</option>
</select> 

<select id="city"></select> 

<script>
var statescity = {};
statescity['qld'] = ['Gold Coast', 'Brisbane', 'McKay'];
statescity['nsw'] = ['Sydney', 'New Castle', 'Cambelltown', 'Penrith'];
statescity['vic'] = ['Melbourne', 'Ballarat', 'Geelong'];
statescity['sa'] = ['Adelaide', 'Coober Pedy', 'Murry Bridge', 'Nullabor'];
statescity['wa'] = ['Perth', 'Geraldton', 'Esperance'];
statescity['tas'] = ['Hobart', 'Launceston', 'Strahan'];
statescity['act'] = ['Canberra', 'Batemans Bay', 'Narooma'];
statescity['nt'] = ['Darwin', 'AliceSprings', 'Katherine'];

function ChangeCityList() {
    var stateList = document.getElementById("state");
    var cityList = document.getElementById("city");
    var pickState = stateList.options[stateList.selectedIndex].value;
    while (cityList.options.length) {
        cityList.remove(0);
    }
    var state = statescity[pickState];
    if (state) {
        var i;
        for (i = 0; i < state.length; i++) {
            var states = new Option(state[i], i);
            cityList.options.add(states);
        }
    }
} 
</script>

</body>
</html>
2

Ok, I’m taking he cheap work around and just adding <option value="">State</option> to the top of my script. I’m sure theres a better alternative but I forgot what it was long ago.

3

Hi there slow_eric,

here is one possible solution, for you to try…

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
body {
    background-color: #f0f0f0;
    font: 1em/1.62em verdana, arial, helvetica, sans-serif;
    text-align: center;
 }
#statesAndCites {
    display: inline-block;
    padding: 2em;
    border: 0.06em solid #999;
    border-radius: 0.5em;
    box-shadow: inset 0 0 1em #999, 0.25em 0.25em 0.25em #999;
    background-color: #fff;
 }
#statesAndCites  fieldset {
    padding: 1em;
    margin: 1em 0;
 }
.hide{
    display: none;
 }
</style>
</head>
<body> 
<form  id="statesAndCites" action="#">
<fieldset>
 <legend>States</legend>
  <select id="state" name="state"> 
   <option value="">states</option> 
   <option value="0">Queensland</option> 
   <option value="1">NSW</option> 
   <option value="2">Victoria</option> 
   <option value="3">South Australia</option> 
   <option value="4">Western Australia</option> 
   <option value="5">Tasmania</option> 
   <option value="6">ACT</option>
   <option value="7">Northern territory</option>
 </select> 
</fieldset>
<fieldset id="cities" class="hide">
 <legend>Cities</legend>
</fieldset>
 <input type="submit">
</form>
<script>
(function() {
   'use strict';
   /* jshint browser: true */
   var statescity=[
                   ['Gold Coast', 'Brisbane', 'McKay'],
                   ['Sydney', 'New Castle', 'Cambelltown', 'Penrith'],
                   ['Melbourne', 'Ballarat', 'Geelong'],
                   ['Adelaide', 'Coober Pedy', 'Murry Bridge', 'Nullabor'],
                   ['Perth', 'Geraldton', 'Esperance'],
                   ['Hobart', 'Launceston', 'Strahan'],
                   ['Canberra', 'Batemans Bay', 'Narooma'],
                   ['Darwin', 'AliceSprings', 'Katherine']
                  ],
             nst,c,opt,num,d=document,obj=d.getElementById('cities');

   d.getElementById('state').addEventListener('change',
   function(){
              if(nst){
                      obj.removeChild(nst);
                      obj.classList.add('hide');
                 }
              if(this.value!=='') {
                 num=this.value;
                 nst=d.createElement('select');
                 nst.setAttribute('id','city');
                 nst.setAttribute('name','city');
                 opt=d.createElement('option');
                 opt.setAttribute('value','');
                 opt.textContent='City  Name';
                 nst.appendChild(opt);
              for(c=0;c<statescity[num].length;c++) {
                 opt=d.createElement('option');
                 opt.setAttribute('value',statescity[num][c]);
                 opt.textContent=statescity[num][c];
                 nst.appendChild(opt);
                 obj.classList.remove('hide');
                 obj.appendChild(nst);
                 }
                }                
             },false);
 }());
</script>

</body>
</html>

coothead

4

Thanks dude, I;m an old man trying to refresh his memory while building my daughter a web site (I was never that good at it anyway). Not sure about the submit button yet, but would you mind if I used your script on my daughters site ??

5

Hi there slow_eric,

I bet that you’re not as old as me. :wonky:

The submit button is optional, I just put it in for testing purposes. :winky:

Please feel free to do whatever you like with the code. :sunglasses:

I will be deleting it shortly from my p.c. :biggrin:

coothead

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.