javascript - 任何让我的 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"]
}

然后根据所选选项获取相关链接文本并循环遍历它们构建 anchor 。

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