javascript - 如何使用 JSON 文件开发具有多个下拉菜单的现场产品过滤程序?
问题描述
我在本网站的帮助下为我们的电子商务网站开发了一个站内重定向工具。我想使用带有适用于现有链接的选项的 JSON 文件进行这些站点内重定向。
我写的代码
$("#find").on("click", function() {
let mevsim = ($("#mevsim").val() == 0) ? "" : $("#mevsim").val();
let tabangenisligi = ($("#tabangenisligi").val() == 0) ? "" : $("#tabangenisligi").val();
let kesitorani = ($("#kesitorani").val() == 0) ? "" : $("#kesitorani").val();
let jantcapi = ($("#jantcapi").val() == 0) ? "" : $("#jantcapi").val();
let url = "https://kolayoto.com/collections/lastikleri?_=pf" + mevsim + tabangenisligi + kesitorani + jantcapi;
console.log("url: " + url);
location.href = url
});
#find {
background: #E8562A;
color: white;
border-style:none;
border-radius: 5px;
left: 50%;
margin-left: 30%;
}
#baslik {
color: #fff;
margin: 0 0 5px;
margin-top:-5px;
padding: 0;
font-weight: 700;
font-size: 15px;
text-align: center;
}
#dropdown-container {
background: url(https://cdn.shopify.com/s/files/1/0251/6146/5961/files/summer_banner_2-2.jpg?v=1582620652) no-repeat center center !important;
background-size: cover !important;
margin-top: -40px !important;
padding: 80px 0 !important;
}
#dropdown-holder {
width: 300px;
background: rgba(25, 18, 18, 0.4);
margin: auto !important;
padding: 20px !important;
}
.dropdown-holder .fo-info {
color: #fff !important;
margin: 5px 0 !important;
}
#dropdown-container > b {
display: block !important;
text-align: center !important;
color: #000 !important;
font-weight: 700 !important;
font-size: 25px !important;
margin-bottom: 15px !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dropdown-container">
<b>Lastik ebatınızı seçin.</b>
<div id="dropdown-holder">
<p id="baslik">Mevsim</p>
<select id="mevsim">
<option value="">Seçiniz</option>
<option value="&pf_t_diger_oezellikler=DiğerÖzellikler-4Mevsim">Dört Mevsim</option>
<option value="&pf_t_mevsim=Mevsim-Yaz">Yaz</option>
<option value="&pf_t_mevsim=Mevsim-Kış">Kış</option>
</select>
<br/><br/>
<p id="baslik">Taban Genişliği</p>
<select id="tabangenisligi">
<option value="">Seçiniz</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>
<option value="&pf_t_genislik=Taban%20Genişliği-165">165</option>
<option value="&pf_t_genislik=Taban%20Genişliği-175">175</option>
<option value="&pf_t_genislik=Taban%20Genişliği-185">185</option>
<option value="&pf_t_genislik=Taban%20Genişliği-195">195</option>
<option value="&pf_t_genislik=Taban%20Genişliği-205">205</option>
<option value="&pf_t_genislik=Taban%20Genişliği-215">215</option>
</select>
<br/><br/>
<p id="baslik">Kesit Oranı</p>
<select id="kesitorani">
<option value="">Seçiniz</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>
<option value="&pf_t_oran=Kesit%20Oranı-45">45</option>
<option value="&pf_t_oran=Kesit%20Oranı-50">50</option>
<option value="&pf_t_oran=Kesit%20Oranı-55">55</option>
<option value="&pf_t_oran=Kesit%20Oranı-60">60</option>
</select>
<br/><br/>
<p id="baslik">Jant Çapı</p>
<select id="jantcapi">
<option value="">Seçiniz</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>
<option value="&pf_t_cap=Jant%20Çapı-16">16</option>
<option value="&pf_t_cap=Jant%20Çapı-17">17</option>
<option value="&pf_t_cap=Jant%20Çapı-18">18</option>
</select>
<br/><br/>
<p>
<img src="https://cdn.shopify.com/s/files/1/0251/6146/5961/files/BDF3A4FE-49C3-4773-B17A-1CB340F33C14.png?13355" width="100%" margin-top="-5px" class="fo-info-img">
<p class="fo-info" style="color: #fff; margin: 0 0 5px; text-align: center;">
Lastik ebatınızı, lastiğinizin yanak yüzeyine bakarak öğrenebilirsiniz.
</p>
<button id="find">Hemen Bul</button>
</p>
</div>
</div>
和,
我找到了这个解决方案,因为该站点需要一个更具体的应用程序,但我不知道如何将它集成到应用程序中。
我将过滤器组合作为提供产品结果的JSON文件。我们可以添加过滤以仅选择它们吗?例如,如果我们在第一个下拉列表中选择“Yaz”选项,则只有“Yaz”选项的“Taban Genisligi”选项将添加到第二个下拉列表中。此外,无需为此过滤器选项中的每个选项分配值。如果选择了 4 个选项,按钮应将我们引导至 csv 文件中的链接。当然,在这种情况下,我们应该按从头到尾的顺序使用下拉菜单并全部选中。可能会有例外,因为某些过滤器选项有 2 或 3 个选项而不是 4 个。
如果您想尝试一下,我们现场网站上的应用程序也使用了我上面提到的工作方式。我们的网站
作为一个新手软件开发人员,我真的很需要这个开发,我正在等待你的帮助。非常感谢您提前。
解决方案
你可以这样做:
var data = {
"Yaz": {
"195": {
"60": {
"15": "kolayoto.com/collections/lastikleri?_=pf&pf_t_mevsim=Mevsim-Yaz&pf_t_genislik=Taban%20Genişliği-195&pf_t_oran=Kesit%20Oranı-60&pf_t_cap=Jant%20Çapı-15"
}
},
"205": {
"55": {
"16": "kolayoto.com/collections/lastikleri?_=pf&pf_t_mevsim=Mevsim-Yaz&pf_t_genislik=Taban%20Geni%C5%9Fli%C4%9Fi-205&pf_t_oran=Kesit%20Oran%C4%B1-55&pf_t_cap=Jant%20%C3%87ap%C4%B1-16"
},
"70": {
"15": "kolayoto.com/collections/lastikleri?_=pf&pf_t_mevsim=Mevsim-Yaz&pf_t_genislik=Taban%20Geni%C5%9Fli%C4%9Fi-205&pf_t_oran=Kesit%20Oran%C4%B1-70&pf_t_cap=Jant%20%C3%87ap%C4%B1-15"
}
}
},
"Kış": {
"185": {
"65": {
"15": "kolayoto.com/collections/lastikleri?_=pf&pf_t_mevsim=Mevsim-Kış&pf_t_genislik=Taban%20Geni%C5%9Fli%C4%9Fi-185&pf_t_oran=Kesit%20Oran%C4%B1-65&pf_t_cap=Jant%20%C3%87ap%C4%B1-15"
}
},
"225": {
"45": {
"17": "kolayoto.com/collections/lastikleri?_=pf&pf_t_mevsim=Mevsim-Kış&pf_t_genislik=Taban%20Geni%C5%9Fli%C4%9Fi-225&pf_t_oran=Kesit%20Oran%C4%B1-45&pf_t_cap=Jant%20%C3%87ap%C4%B1-17"
}
}
},
"DörtMevsim": {
"205": {
"55": {
"16": "kolayoto.com/collections/lastikleri?_=pf&pf_t_diger_oezellikler=Di%C4%9Fer%C3%96zellikler-4Mevsim&pf_t_genislik=Taban%20Geni%C5%9Fli%C4%9Fi-205&pf_t_oran=Kesit%20Oran%C4%B1-55&pf_t_cap=Jant%20%C3%87ap%C4%B1-16"
}
},
"255": {
"40": {
"20": "kolayoto.com/collections/lastikleri?_=pf&pf_t_diger_oezellikler=Di%C4%9Fer%C3%96zellikler-4Mevsim&pf_t_genislik=Taban%20Geni%C5%9Fli%C4%9Fi-255&pf_t_oran=Kesit%20Oran%C4%B1-40&pf_t_cap=Jant%20%C3%87ap%C4%B1-20"
},
"50": {
"19": "kolayoto.com/collections/lastikleri?_=pf&pf_t_diger_oezellikler=Di%C4%9Fer%C3%96zellikler-4Mevsim&pf_t_genislik=Taban%20Geni%C5%9Fli%C4%9Fi-255&pf_t_oran=Kesit%20Oran%C4%B1-50&pf_t_cap=Jant%20%C3%87ap%C4%B1-19"
}
}
}
}
let mevsim = [];
let tabangenisligi = [];
let kesitorani = [];
let jantcapi = [];
$.each(data, function(key, val) {
mevsim.push(key);
$.each(val, function(key2, val2) {
tabangenisligi.push(key2);
$.each(val2, function(key3, val3) {
kesitorani.push(key3);
$.each(val3, function(key4, val4) {
jantcapi.push(key4);
});
});
});
});
mevsim.sort();
tabangenisligi.sort();
kesitorani.sort();
jantcapi.sort();
mevsim = mevsim.filter((x, i, a) => a.indexOf(x) === i);
tabangenisligi = tabangenisligi.filter((x, i, a) => a.indexOf(x) === i);
kesitorani = kesitorani.filter((x, i, a) => a.indexOf(x) === i);
jantcapi = jantcapi.filter((x, i, a) => a.indexOf(x) === i);
$('#mevsim').empty();
$('#mevsim').append($('<option></option>').val("0").html("Seçiniz"));
$.each(mevsim, function(i, p) {
$('#mevsim').append($('<option></option>').val(p).html(p));
});
$('#tabangenisligi').empty();
$('#tabangenisligi').append($('<option></option>').val("0").html("Seçiniz"));
$.each(tabangenisligi, function(i, p) {
$('#tabangenisligi').append($('<option></option>').val(p).html(p));
});
$('#kesitorani').empty();
$('#kesitorani').append($('<option></option>').val("0").html("Seçiniz"));
$.each(kesitorani, function(i, p) {
$('#kesitorani').append($('<option></option>').val(p).html(p));
});
$('#jantcapi').empty();
$('#jantcapi').append($('<option></option>').val("0").html("Seçiniz"));
$.each(jantcapi, function(i, p) {
$('#jantcapi').append($('<option></option>').val(p).html(p));
});
$("#tabangenisligi").prop('disabled', 'disabled');
$("#kesitorani").prop('disabled', 'disabled');
$("#jantcapi").prop('disabled', 'disabled');
$("#find").prop('disabled', 'disabled');
$("#mevsim").on("change", function() {
if ($(this).find("option:selected").val() != "0") {
$("#tabangenisligi").prop('disabled', false);
}
let mevsim = $(this).find("option:selected").text();
let tabangenisligi = [];
let kesitorani = [];
let jantcapi = [];
$.each(data, function(key, val) {
if (key == mevsim) {
$.each(val, function(key2, val2) {
tabangenisligi.push(key2);
$.each(val2, function(key3, val3) {
kesitorani.push(key3);
$.each(val3, function(key4, val4) {
jantcapi.push(key4);
});
});
});
}
});
tabangenisligi.sort();
kesitorani.sort();
jantcapi.sort();
tabangenisligi = tabangenisligi.filter((x, i, a) => a.indexOf(x) === i);
kesitorani = kesitorani.filter((x, i, a) => a.indexOf(x) === i);
jantcapi = jantcapi.filter((x, i, a) => a.indexOf(x) === i);
$('#tabangenisligi').empty();
$('#tabangenisligi').append($('<option></option>').val("0").html("Seçiniz"));
$.each(tabangenisligi, function(i, p) {
$('#tabangenisligi').append($('<option></option>').val(p).html(p));
});
$('#kesitorani').empty();
$('#kesitorani').append($('<option></option>').val("0").html("Seçiniz"));
$.each(kesitorani, function(i, p) {
$('#kesitorani').append($('<option></option>').val(p).html(p));
});
$('#jantcapi').empty();
$('#jantcapi').append($('<option></option>').val("0").html("Seçiniz"));
$.each(jantcapi, function(i, p) {
$('#jantcapi').append($('<option></option>').val(p).html(p));
});
});
$("#tabangenisligi").on("change", function() {
if ($(this).find("option:selected").val() != "0") {
$("#kesitorani").prop('disabled', false);
}
let mevsim = $("#mevsim").find("option:selected").text();
let tabangenisligi = $(this).find("option:selected").text();
let kesitorani = [];
let jantcapi = [];
$.each(data, function(key, val) {
if (key == mevsim) {
$.each(val, function(key2, val2) {
if (key2 == tabangenisligi) {
$.each(val2, function(key3, val3) {
kesitorani.push(key3);
$.each(val3, function(key4, val4) {
jantcapi.push(key4);
});
});
}
});
}
});
kesitorani.sort();
jantcapi.sort();
kesitorani = kesitorani.filter((x, i, a) => a.indexOf(x) === i);
jantcapi = jantcapi.filter((x, i, a) => a.indexOf(x) === i);
$('#kesitorani').empty();
$('#kesitorani').append($('<option></option>').val("0").html("Seçiniz"));
$.each(kesitorani, function(i, p) {
$('#kesitorani').append($('<option></option>').val(p).html(p));
});
$('#jantcapi').empty();
$('#jantcapi').append($('<option></option>').val("0").html("Seçiniz"));
$.each(jantcapi, function(i, p) {
$('#jantcapi').append($('<option></option>').val(p).html(p));
});
});
$("#kesitorani").on("change", function() {
if ($(this).find("option:selected").val() != "0") {
$("#jantcapi").prop('disabled', false);
}
let mevsim = $("#mevsim").find("option:selected").text();
let tabangenisligi = $("#tabangenisligi").find("option:selected").text();
let kesitorani = $(this).find("option:selected").text();
let jantcapi = [];
$.each(data, function(key, val) {
if (key == mevsim) {
$.each(val, function(key2, val2) {
if (key2 == tabangenisligi) {
$.each(val2, function(key3, val3) {
if (key3 == kesitorani) {
$.each(val3, function(key4, val4) {
jantcapi.push(key4);
});
}
});
}
});
}
});
jantcapi.sort();
jantcapi = jantcapi.filter((x, i, a) => a.indexOf(x) === i);
$('#jantcapi').empty();
$('#jantcapi').append($('<option></option>').val("0").html("Seçiniz"));
$.each(jantcapi, function(i, p) {
$('#jantcapi').append($('<option></option>').val(p).html(p));
});
});
$("#jantcapi").on("change", function() {
if ($(this).find("option:selected").val() != "0") {
$("#find").prop('disabled', false);
}
});
$("#find").on("click", function() {
let mevsim = $("#mevsim").val();
let tabangenisligi = $("#tabangenisligi").val();
let kesitorani = $("#kesitorani").val();
let jantcapi = $("#jantcapi").val();
let newUrl;
$.each(data, function(key, val) {
if (key == mevsim) {
$.each(val, function(key2, val2) {
if (key2 == tabangenisligi) {
$.each(val2, function(key3, val3) {
if (key3 == kesitorani) {
$.each(val3, function(key4, val4) {
if (key4 == jantcapi) {
newUrl = val4;
}
});
}
});
}
});
}
});
console.log(newUrl);
/* location.href= url */
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dropdown-container">
<b>Lastik ebatınızı seçin.</b>
<div id="dropdown-holder">
<p id="baslik">Mevsim</p>
<select id="mevsim">
</select><br /><br />
<p id="baslik">Taban Genişliği</p>
<select id="tabangenisligi">
</select><br /><br />
<p id="baslik">Kesit Oranı</p>
<select id="kesitorani">
</select><br /><br />
<p id="baslik">Jant Çapı</p>
<select id="jantcapi">
</select><br /><br />
<button id="find">
Hemen Bul
</button>
</div>
</div>
<br /><br />
推荐阅读
- python - PyMongo 和集合查询的结果
- sql - 如何使用sql计算两个计数的比率?
- sql - 仅更新我的 Datetime 列中的时间 (SQL)
- sql - 实施逻辑以过滤前 10 个数据的问题
- three.js - 将 Shaderfrog 与动画 glb 一起使用
- r - 自定义函数中的 dplyr group_by 问题;与tidyeval有关吗?
- pact - Pact 中的 ProviderStates
- javascript - 为 const JavaScript 命名空间自动生成 .d.ts 文件时重复的方法
- python - 4D多通道图像处理python
- angular - 如何使一个页面与另一个页面交互?