时间戳

首页 > 解决方案 > 如何开发具有多个下拉菜单的站点内链接程序？

javascript - 如何开发具有多个下拉菜单的站点内链接程序？

问题描述

我需要开发我们在 Shopify 电子商务网站上使用的多个下拉列表的类似应用程序，以链接到网站内的所有轮胎类型页面。我试过了，但我做不到，因为我在 JS 和 Jquery 方面的经验不够，而且我不知道如何开始。你能帮助我吗？

我们在 Shopify 网站上使用的应用

我想将下拉列表中选择的选项的 json 值添加到下面链接的末尾，该链接应该位于“立即查找”（Hemen Bul）按钮中。 https://kolayoto.com/collections/lastikleri?_=

如果我们的选择是“Yaz”、“225”、“60”和“15”。我们的选择将添加到链接的末尾，当我们单击立即查找 (Hemen Bul) 按钮时，它将引导我们到下面的链接。https://kolayoto.com/collections/lastikleri?_=pf&pf_t_mevsim=Mevsim-Yaz&pf_t_genislik=Taban%20Geni%C5%9Fli%C4%9Fi-225&pf_t_oran=Kesit%20Oran%C4%B1-60&pf_t_cap=Jant%20%C3% 87ap%C4%B1-15

这样，我将从主页链接到所有季节和轮胎类型的页面。

Example Json file that I will use in the application.

{
  "mevsim": {
    "DörtMevsim": "pf&pf_t_diger_oezellikler=DiğerÖzellikler-4Mevsim",
    "Yaz": "pf&pf_t_mevsim=Mevsim-Yaz",
    "Kış": "pf&pf_t_mevsim=Mevsim-Kış"
  },
  "tabangenisligi": {
    "135": "&pf_t_genislik=Taban%20Genişliği-135",
    "145": "&pf_t_genislik=Taban%20Genişliği-145",
    "155": "&pf_t_genislik=Taban%20Genişliği-155",
    "165": "&pf_t_genislik=Taban%20Genişliği-165",
    "175": "&pf_t_genislik=Taban%20Genişliği-175",
    "185": "&pf_t_genislik=Taban%20Genişliği-185",
    "195": "&pf_t_genislik=Taban%20Genişliği-195",
    "205": "&pf_t_genislik=Taban%20Genişliği-205",
    "215": "&pf_t_genislik=Taban%20Genişliği-215",
    "225": "&pf_t_genislik=Taban%20Genişliği-225",
    "235": "&pf_t_genislik=Taban%20Genişliği-235",
    "245": "&pf_t_genislik=Taban%20Genişliği-245",
    "255": "&pf_t_genislik=Taban%20Genişliği-255"
  },
  "kesitorani": {
    "30": "&pf_t_oran=Kesit%20Oranı-30",
    "35": "&pf_t_oran=Kesit%20Oranı-35",
    "40": "&pf_t_oran=Kesit%20Oranı-40",
    "45": "&pf_t_oran=Kesit%20Oranı-45",
    "50": "&pf_t_oran=Kesit%20Oranı-50",
    "55": "&pf_t_oran=Kesit%20Oranı-55",
    "60": "&pf_t_oran=Kesit%20Oranı-60",
    "65": "&pf_t_oran=Kesit%20Oranı-65",
    "70": "&pf_t_oran=Kesit%20Oranı-70",
    "75": "&pf_t_oran=Kesit%20Oranı-75"
  },
  "jantcapi": {
    "13": "&pf_t_cap=Jant%20Çapı-13",
    "14": "&pf_t_cap=Jant%20Çapı-14",
    "15": "&pf_t_cap=Jant%20Çapı-15",
    "16": "&pf_t_cap=Jant%20Çapı-16",
    "17": "&pf_t_cap=Jant%20Çapı-17",
    "18": "&pf_t_cap=Jant%20Çapı-18",
    "19": "&pf_t_cap=Jant%20Çapı-19",
    "20": "&pf_t_cap=Jant%20Çapı-20"
  }
}

我不知道如何将Json值链接到下拉列表，并在选择这些值时将它们添加到“立即查找”按钮中的链接。

作为一个新的软件开发人员，我真的很需要这个开发，我正在等待你的帮助。非常感谢您提前。

标签： javascripthtmljqueryjsonshopify

解决方案

您可以这样做：将 url 部分添加为选项的值，并将所有选定的值添加到 url。在示例中，我仅添加了每个类别的几个选项作为演示，单击“查找全部”按钮后，URL 将出现在控制台中。要真正访问该 url，请取消注释该行location.href = url。

$("#find").on("click", function() {
  let mevsim = ($("#mevsim").val() == 0) ? "" : $("#mevsim").val();
  let tabangenisligi = ($("#tabangenisligi").val() == 0) ? "" : $("#tabangenisligi").val();
  let kesitorani = ($("#mevsim").val() == 0) ? "" : $("#kesitorani").val();
  let jantcapi = ($("#mevsim").val() == 0) ? "" : $("#jantcapi").val();
  let url = "https://kolayoto.com/collections/lastikleri?_=" + mevsim + tabangenisligi + kesitorani + jantcapi;
  console.log("url: " + url);
  /* location.href = url */
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="mevsim">
  <option value="0">Please select</option>
  <option value="pf&pf_t_diger_oezellikler=DiğerÖzellikler-4Mevsim">DörtMevsim</option>
  <option value="pf&pf_t_mevsim=Mevsim-Yaz">Yaz</option>
  <option value="pf&pf_t_mevsim=Mevsim-Kış">Kış</option>
</select><br /><br />
<select id="tabangenisligi">
  <option value="0">Please select</option>
  <option value="&pf_t_genislik=Taban%20Genişliği-135">135</option>
  <option value="&pf_t_genislik=Taban%20Genişliği-145">145</option>
  <option value="&pf_t_genislik=Taban%20Genişliği-155">155</option>
</select><br /><br />
<select id="kesitorani">
  <option value="0">Please select</option>
  <option value="&pf_t_oran=Kesit%20Oranı-30">30</option>
  <option value="&pf_t_oran=Kesit%20Oranı-35">35</option>
  <option value="&pf_t_oran=Kesit%20Oranı-40">40</option>
</select><br /><br />
<select id="jantcapi">
  <option value="0">Please select</option>
  <option value="&pf_t_cap=Jant%20Çapı-13">13</option>
  <option value="&pf_t_cap=Jant%20Çapı-14">14</option>
  <option value="&pf_t_cap=Jant%20Çapı-15">15</option>
</select><br /><br />
<button id="find">
  Find Now
</button>

更新：由于无法将所有 url 部分作为值添加到选项中，因此也可以从 JSON 中获取它们。请注意，url 部分不再需要是选项值，这只是示例代码的剩余部分。单击“立即查找”按钮取消注释location.href = url以转到 URL 的行。

let data = {
  "mevsim": {
    "DörtMevsim": "pf&pf_t_diger_oezellikler=DiğerÖzellikler-4Mevsim",
    "Yaz": "pf&pf_t_mevsim=Mevsim-Yaz",
    "Kış": "pf&pf_t_mevsim=Mevsim-Kış"
  },
  "tabangenisligi": {
    "135": "&pf_t_genislik=Taban%20Genişliği-135",
    "145": "&pf_t_genislik=Taban%20Genişliği-145",
    "155": "&pf_t_genislik=Taban%20Genişliği-155",
    "165": "&pf_t_genislik=Taban%20Genişliği-165",
    "175": "&pf_t_genislik=Taban%20Genişliği-175",
    "185": "&pf_t_genislik=Taban%20Genişliği-185",
    "195": "&pf_t_genislik=Taban%20Genişliği-195",
    "205": "&pf_t_genislik=Taban%20Genişliği-205",
    "215": "&pf_t_genislik=Taban%20Genişliği-215",
    "225": "&pf_t_genislik=Taban%20Genişliği-225",
    "235": "&pf_t_genislik=Taban%20Genişliği-235",
    "245": "&pf_t_genislik=Taban%20Genişliği-245",
    "255": "&pf_t_genislik=Taban%20Genişliği-255"
  },
  "kesitorani": {
    "30": "&pf_t_oran=Kesit%20Oranı-30",
    "35": "&pf_t_oran=Kesit%20Oranı-35",
    "40": "&pf_t_oran=Kesit%20Oranı-40",
    "45": "&pf_t_oran=Kesit%20Oranı-45",
    "50": "&pf_t_oran=Kesit%20Oranı-50",
    "55": "&pf_t_oran=Kesit%20Oranı-55",
    "60": "&pf_t_oran=Kesit%20Oranı-60",
    "65": "&pf_t_oran=Kesit%20Oranı-65",
    "70": "&pf_t_oran=Kesit%20Oranı-70",
    "75": "&pf_t_oran=Kesit%20Oranı-75"
  },
  "jantcapi": {
    "13": "&pf_t_cap=Jant%20Çapı-13",
    "14": "&pf_t_cap=Jant%20Çapı-14",
    "15": "&pf_t_cap=Jant%20Çapı-15",
    "16": "&pf_t_cap=Jant%20Çapı-16",
    "17": "&pf_t_cap=Jant%20Çapı-17",
    "18": "&pf_t_cap=Jant%20Çapı-18",
    "19": "&pf_t_cap=Jant%20Çapı-19",
    "20": "&pf_t_cap=Jant%20Çapı-20"
  }
}

$("#find").on("click", function() {
let mevsim, tabangenisligi, kesitorani, jantcapi;
if($("#mevsim").val() == 0){
mevsim = "";
}
else {
   let selected = $("#mevsim").find("option:selected").text();
  
   $.each(data, function(i, val) {
    if (i == "mevsim") {
      $.each(val, function(key, value) {
        if (key == selected) {
          mevsim = value;
        }
      });
    }
  });
}
if($("#tabangenisligi").val() == 0){
tabangenisligi = "";
}
else {
   let selected = $("#tabangenisligi").find("option:selected").text();
  
   $.each(data, function(i, val) {
    if (i == "tabangenisligi") {
      $.each(val, function(key, value) {
        if (key == selected) {
          tabangenisligi = value;
        }
      });
    }
  });
}
if($("#kesitorani").val() == 0){
kesitorani = "";
}
else {
   let selected = $("#kesitorani").find("option:selected").text();
  
   $.each(data, function(i, val) {
    if (i == "kesitorani") {
      $.each(val, function(key, value) {
        if (key == selected) {
          kesitorani = value;
        }
      });
    }
  });
}
if($("#jantcapi").val() == 0){
jantcapi = "";
}
else {
   let selected = $("#jantcapi").find("option:selected").text();
  
   $.each(data, function(i, val) {
    if (i == "jantcapi") {
      $.each(val, function(key, value) {
        if (key == selected) {
          jantcapi = value;
        }
      });
    }
  });
}
  let url = "https://kolayoto.com/collections/lastikleri?_=" + mevsim + tabangenisligi + kesitorani + jantcapi;
  console.log("url: " + url);
  /* location.href= url */
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="mevsim">
  <option value="0">Please select</option>
  <option value="pf&pf_t_diger_oezellikler=DiğerÖzellikler-4Mevsim">DörtMevsim</option>
  <option value="pf&pf_t_mevsim=Mevsim-Yaz">Yaz</option>
  <option value="pf&pf_t_mevsim=Mevsim-Kış">Kış</option>
</select><br /><br />
<select id="tabangenisligi">
  <option value="0">Please select</option>
  <option value="&pf_t_genislik=Taban%20Genişliği-135">135</option>
  <option value="&pf_t_genislik=Taban%20Genişliği-145">145</option>
  <option value="&pf_t_genislik=Taban%20Genişliği-155">155</option>
</select><br /><br />
<select id="kesitorani">
  <option value="0">Please select</option>
  <option value="&pf_t_oran=Kesit%20Oranı-30">30</option>
  <option value="&pf_t_oran=Kesit%20Oranı-35">35</option>
  <option value="&pf_t_oran=Kesit%20Oranı-40">40</option>
</select><br /><br />
<select id="jantcapi">
  <option value="0">Please select</option>
  <option value="&pf_t_cap=Jant%20Çapı-13">13</option>
  <option value="&pf_t_cap=Jant%20Çapı-14">14</option>
  <option value="&pf_t_cap=Jant%20Çapı-15">15</option>
</select><br /><br />
<button id="find">
  Find Now
</button>

推荐阅读