0

My code does not work anymore. When I click on country dropdown, the second opdown my to display the states. This approach does not work anymore.

the console write an error

Console

Uncaught ReferenceError: update_zone is not defined
    onchange

Below my codemy html code about the country My dropdown

<select name="country" id="country" onchange="update_zone(this.form);" class="form-select form-control">
<option value="">--- Selectionner ---</option><option value="1">Afghanistan</option><option value="2">Albania</option><option value="3">Algeria</option><option value="4">American Samoa</option><option value="5">Andorra</option><option value="6">Angola</option><option value="7">Anguilla</option><option value="8">Antarctica</option><option value="9">Antigua and Barbuda</option><option value="10">Argentina</option><option value="11">Armenia</option><option value="12">Aruba</option><option value="13">Australia</option><option value="14">Austria</option><option value="15">Azerbaijan</option><option value="16">Bahamas</option><option value="17">Bahrain</option><option value="18">Bangladesh</option><option value="19">Barbados</option><option value="20">Belarus</option><option value="21">Belgium</option></select>

my javascript about the state

My dropdown with the data

<select name="state" id="state" class="form-select form-control"><option value="">-- Sélectionner --</option></select>

                <script>
  function resetZoneSelected(theForm) {
    if (theForm.state.value != '') {
      theForm.state.selectedIndex = '0';
      if (theForm.state.options.length > 0) {
        theForm.state.value = '-- Sélectionnez --';
      }
    }
  }

  function update_zone(theForm) {
      let NumState = theForm.state.options.length;
      let SelectedCountry = "";

      while(NumState > 0) {
      NumState--;
      theForm.state.options[NumState] = null;
    }

    SelectedCountry = theForm.country.options[theForm.country.selectedIndex].value;

      if (SelectedCountry == "14") {
    theForm.state.options[0] = new Option("-- Sélectionner --", "");
    theForm.state.options[1] = new Option("Burgenland", "102");
    theForm.state.options[2] = new Option("Kärnten", "99");
    theForm.state.options[3] = new Option("Niederösterreich", "96");
    theForm.state.options[4] = new Option("Oberösterreich", "97");
    theForm.state.options[5] = new Option("Salzburg", "98");
    theForm.state.options[6] = new Option("Steiermark", "100");
    theForm.state.options[7] = new Option("Tirol", "101");
    theForm.state.options[8] = new Option("Voralberg", "103");
    theForm.state.options[9] = new Option("Wien", "95");
  } elseif (SelectedCountry == "21") {
    theForm.state.options[0] = new Option("-- Sélectionner --", "");
    theForm.state.options[1] = new Option("Anvers", "288");
    theForm.state.options[2] = new Option("Brabant Flamand", "291");
    theForm.state.options[3] = new Option("Brabant Wallon", "292");
    theForm.state.options[4] = new Option("Flandre Orientale", "297");
    theForm.state.options[5] = new Option("Hainaut", "290");
    theForm.state.options[6] = new Option("Liege", "293");
    theForm.state.options[7] = new Option("Limbourg", "289");
    theForm.state.options[8] = new Option("Luxembourg", "295");
    theForm.state.options[9] = new Option("Namen", "296");
    theForm.state.options[10] = new Option("Namur", "294");
  
  } else {
    theForm.state.options[0] = new Option("--- Selectionner ---", "");
  }

  }
</script>`
michael
  • 1
  • 1
  • `elseif` is invalid syntax. There should be an error about this in the console. Inline event handlers like `onchange` are [bad practice](/q/11737873/4642212). They’re an [obsolete, cumbersome, and unintuitive](/a/43459991/4642212) way to listen for events. Always [use `addEventListener`](//developer.mozilla.org/en/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. – Sebastian Simon Nov 13 '22 at 23:39

0 Answers0