Заполнение раскрывающегося списка массивом значений, переданных из JavaScript

Question

У меня есть выпадающий список, который показывает континенты. В зависимости от выбора континента, следующий выпадающий список покажет соответствующие страны этого континента. Вот как я это сделал

<label for="website">Continent</label>
   <Select  class="form-control" th:field="*{continent}" id="continent">
         <option th:value="Africa" th:text="Africa"></option>
         <option th:value="Europe" th:text="Europe"></option>
         <option  th:value="Asia" th:text="Asia"></option>
</Select>



<label for="website">Country</label>
<Select  class="form-control" th:field="*{country}" id="country">  </Select>               

Вот код JavaScript, который я использовал для этого

<script>
    var select = document.getElementById('continent');

    select.addEventListener("change",function() {
        passValue(this.value);
    });

    function passValue(x) {
        var a = x;
        if (a=='Asia'){
            var options=['China','India','Pakistan','Malaysia']
        }else if (a == 'Europe'){
            var options=['UK','Switzerland','Germany','France']
        }else if(a=='Africa'){
            var options=['South Africa','Ethiopia','Kenya','Moroco']
        }


        var select = document.getElementById("country");
        for(var i = 0; i < options.length; i++) {
            var opt = options[i];
            var el = document.createElement("option");
            el.textContent = opt;
            el.value = opt;
            select.appendChild(el);
        }
    }

Если я выберу континент для примера Европа, страны Европы будут показаны во втором раскрывающемся списке, как я и ожидал. Но если я выберу другой континент для примера Азия, то все страны в предыдущем и текущем выборе (страны в Европе и Азии) будут показаны во втором раскрывающемся списке

После выбора Европы в раскрывающемся списке 1

Выбор Азии в раскрывающемся списке 1 после выбора Европы

Пожалуйста, дайте решение этой проблемы.

Answer 1

Вы можете сначала установить параметры в раскрывающемся списке пустыми, прежде чем снова добавлять эти новые параметры, например

, если вы используете Jquery:

$('#country').empty()

, если вы используете чистый JS

document.getElementById("country").innerHTML ="";

Answer 2

Вам необходимо очистить переменную параметров при последующих щелчках, чтобы она не добавляла то, что уже есть. Это должно сработать.

    function passValue(x) {
        var options = [];     <--- Set the options array to empty
        var a = x;
        if (a=='Asia'){
            options=['China','India','Pakistan','Malaysia']
        }else if (a == 'Europe'){
            options=['UK','Switzerland','Germany','France']
        }else if(a=='Africa'){
            options=['South Africa','Ethiopia','Kenya','Moroco']
        }