Une suggestion pour réduire la taille de mon code javascript + html ?

Question

Bonjour, j'ai le code ci-dessous qui concerne tous les pays du monde (le code est devenu trop gros donc je n'en ai copié qu'une partie).

<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>

Ainsi, lorsque je choisis l'une des options avec JS, l'autre div(#myDropdown) reçoit toutes les villes du pays de cette option.

$(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") {

Je n'ai pas trouvé de solution à ce problème, mais j'ai trouvé une solution à mon problème. (désolé si ma question est dupliquée, je ne l'ai pas trouvée)

Answer 1

Vous pouvez utiliser un objet qui contient vos données comme :

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

Ensuite, vous récupérez le texte des liens connexes en fonction de l'option sélectionnée et vous les parcourez en boucle pour construire les ancres.

$(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...
};

objet simple avec des tableaux. C'est ce que j'aurais fait.