Любое предложение, чтобы сделать мой код JavaScript + HTML меньше

Question

Здравствуйте, у меня есть приведенный ниже код, предназначенный для всех стран мира (код становится слишком большим, поэтому я просто копирую его немного)

<div class="dropdown w-100">
  <button onclick="myFunction()" class=" form-control selecter w-100" id="city">City - شهر</button>
  <div id="myDropdown" class="dropdown-content" style="height: auto;max-height: 400px;overflow-x: hidden;">

  </div>
</div>
</div>
<div class="col-md-3">
  <select class="form-control selecter selectpicker" id="type" data-live-search-style="startsWith" data-live-search="true">
    <option value="item0">--Select an Item--</option>
    <option value="item1">Afghanistan</option>
    <option value="item2">Albania</option>
    <option value="item3">Algeria</option>
    <option value="item4">Andorra</option>
    <option value="item5">Angola</option>
    <option value="item6">Antigua and Barbuda</option>
    <option value="item7">Argentina</option>
    <option value="item8">Armenia</option>
    <option value="item9">Australia</option>
    <option value="item10">Austria</option>
    </section>
</div>

Поэтому, когда я выбираю один из вариантов с JS, другой div (#myDropdown) получает все города страны этого варианта

$(document).ready(function () {
$("#type").on('change',function () {
    if (this.value == "item1") {
        $("#myDropdown").html("<input type='text' placeholder='Search..' id='myInput' onkeyup='filterFunction()'><a href='#' onclick='inputFunction(innerHTML)'>Herat</a><a href='#' onclick='inputFunction(innerHTML)'>Kabul</a><a href='#' onclick='inputFunction(innerHTML)'>Kandahar</a>");
    }  else if (this.value == "item2") {
        $("#myDropdown").html("<input type='text' placeholder='Search..' id='myInput' onkeyup='filterFunction()'><a href='#' onclick='inputFunction(innerHTML)'>Berat</a><a href='#' onclick='inputFunction(innerHTML)'>Durres</a><a href='#' onclick='inputFunction(innerHTML)'>Elbasan</a><a href='#' onclick='inputFunction(innerHTML)'>Fier</a><a href='#' onclick='inputFunction(innerHTML)'>Pogradec</a>");
    }  else if (this.value == "item3") {
        $("#myDropdown").html("<input type='text' placeholder='Search..' id='myInput' onkeyup='filterFunction()'><a href='#' onclick='inputFunction(innerHTML)'>Adrar</a><a href='#' onclick='inputFunction(innerHTML)'>Algiers</a><a href='#' onclick='inputFunction(innerHTML)'>Ain Salah</a><a href='#' onclick='inputFunction(innerHTML)'>Bordj El Haouas</a><a href='#' onclick='inputFunction(innerHTML)'>Ouargla</a><a href='#' onclick='inputFunction(innerHTML)'>Tit</a>");
    } else if (this.value == "item4") {
        $("#myDropdown").html("<input type='text' placeholder='Search..' id='myInput' onkeyup='filterFunction()'><a href='#' onclick='inputFunction(innerHTML)'>Andorra la Vella</a><a href='#' onclick='inputFunction(innerHTML)'>El Pas de la Casa</a><a href='#' onclick='inputFunction(innerHTML)'>La Massana</a><a href='#' onclick='inputFunction(innerHTML)'>Soldeu</a>");
    } else if (this.value == "item5") {

для всей страны этот код велик, есть ли способ сделать его меньше? лучший путь? (извините, если мой вопрос дублирован, я просто не нашел его)

Answer 1

Вы можете использовать объект, содержащий ваши данные, например:

let data = {
   item1: ["Herat", "Kabul", "Kandahar"],
   item2: ["Berat", "Durres", "Elbasan", "Fier", "Pogradec"]
}

Затем извлеките текстовую базу связанных ссылок на выбранную опцию и прокрутите их, создавая якоря.

$(document).ready(function() {
  let dropdown = $("#myDropdown");
  let data = {
    item1: ["Herat", "Kabul", "Kandahar"],
    item2: ["Berat", "Durres", "Elbasan", "Fier", "Pogradec"]
  }

  $("#type").on('change', function() {
    dropdown.html("<input type='text' placeholder='Search..' id='myInput' onkeyup='filterFunction()'>");

    $.each(data[this.value], function(i, o) {
      dropdown.append("<a href='#' onclick='inputFunction(innerHTML)'>" + o + "</a> | ");
    });

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown w-100">
  <div id="myDropdown" class="dropdown-content" style="height: auto;max-height: 400px;overflow-x: hidden;">
    <div class="col-md-3">
      <select class="form-control selecter selectpicker" id="type" data-live-search-style="startsWith" data-live-search="true">
        <option value="item0">--Select an Item--</option>
        <option value="item1">Afghanistan</option>
        <option value="item2">Albania</option>
      </select>
    </div>

Answer 2

let countries = {
    a : [ "Australia" , "Algeria" .....]
    b : [ "Bulgaria" , "Burkina Faso" ...]
    and so on...
};

простой объект с массивами. это то, что я бы сделал.