如何使用 JSON 文件开发具有多个下拉列表的现场产品过滤程序？

伯克 B.

我在本网站的帮助下为我们的电子商务网站开发了一个网站内重定向工具。我想使用带有适用于现有链接的选项的 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 个。

如果您想尝试一下，我们实时站点上的应用程序也使用了我上面提到的工作方式。我们的网站

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

马蒂亚斯_h

你可以这样做：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2021-08-9

我来说两句

0 条评论

登录后参与评论

上一篇：数组中的随机项目，在 Javascript 中不重复元素

TOP 榜单

文章

如何使用 JSON 文件开发具有多个下拉列表的现场产品过滤程序？

如何使用 JSON 文件开发具有多个下拉列表的现场产品过滤程序？

蓝屏死机没有修复解决方案

计算数据帧中每行的NA

UITableView的项目向下滚动后更改颜色，然后快速备份

Node.js中未捕获的异常错误，发生调用

在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

Linux的官方Adobe Flash存储库是否已过时？

验证REST API参数

ggplot：对齐多个分面图-所有大小不同的分面

Mac OS X更新后的GRUB 2问题

通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

带有错误“ where”条件的查询如何返回结果？

用日期数据透视表和日期顺序查询

VB.net将2条特定行导出到DataGridView

如何从视图一次更新多行（ASP.NET - Core）

Java Eclipse中的错误13，如何解决？

尝试反复更改屏幕上按钮的位置 - kotlin android studio

离子动态工具栏背景色

应用发明者仅从列表中选择一个随机项一次

当我尝试下载 StanfordNLP en 模型时，出现错误

python中的boto3文件上传

在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID