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

带有数组的简单对象。这就是我要做的。

任何使我的javascript + html代码更小的建议

2 个答案: