html – onchange event in javascript-ThrowExceptions

Exception or error:
var cars={
ncr:['','FIRST', 'NCR, SECOND DISTRICT' , 'NCR, THIRD DISTRICT','NCR, FOURTH DISTRICT']}
var main= document.getElementById('main_menu');
var sub = document.getElementById('sub_menu');
main.addEventListener('change',function()
{
var selected_option = cars[this.value];
while(sub.options.length > 0)
    {
      sub.options.remove(0);
    }
Array.from(selected_option).forEach(function(el)
{
let option  = new Option(el, el);
sub.appendChild(option);
}); 
});
<div class="container mt-5">
    <div class="row">
        <div class="col-md-3">
            <h5>REGION</h5>
        </div>
        <div class="col-md-3">
            <select name="car" id="main_menu" class="custom-select">
                <option value=""></option>
                <option value="ncr">NCR - NATIONAL CAPITAL REGION </option>
                <option value="car">CAR - CORDILLERA ADMINISTRATIVE REGION</option>
                 </div>
              </select
        <div class="col-md-3">
                <select name="first" id="sub_menu" class="custom-select">
            </select>
        </div>
   </div>

When I click the NCR it will display the first district, second district, third district and fourth district.

What i want to happen is i want to have a third dropdown.
After i click the fourth district it should display makati,pateros,taguig.
I hope you can help me. Thanks.

How to solve:

Leave a Reply

Your email address will not be published. Required fields are marked *