Bollate

HTML

[ANSWERED] javascript – How can I develop an in-site linking program with multiple dropdown?

By

Nov 20, 2022 , , , ,

Solution 1 :

You could do it like this: Add the url part as values of the options and add all selected values to the url. In the example I’ve only added a few options of each category as demonstration and on click of the “Find all” button the url appears in the console. To really go to the url, uncomment the line 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>

Update: As adding all url parts as values to the options is no choice, it’s also possible to get them from the JSON. Note that the url parts don’t need be option values anymore, this is just a leftover from the example code. Uncomment the line location.href = urlto go to the URL on click of the “Find now” button.

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>

Problem :

I need to develop a similar application of multiple dropdown that we use on our Shopify e-commerce Site for links to all tire type pages within the site. I tried but I couldn’t do it because I was not experienced enough in JS and Jquery and I don’t know how to get started. Can you help me?

The app we use on our Shopify Site

I want to add the json value of the option selected in dropdowns to the end of the link below which should be in the “Find Now” (Hemen Bul) button.
https://kolayoto.com/collections/lastikleri?_=

If our choices are “Yaz”, “225”, “60” and “15”. Our selections will be added to the end of the link and when we click the Find Now (Hemen Bul) button, it will direct us to the link below. 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

In this way, I will link to all season and tire type pages from the homepage.

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"
  }
}

I don’t know how to link Json values ​​to dropdowns and add them to the link in the “Find Now” button when these values ​​are selected.

As a new software developer, I really need this development and I am waiting for your help. Thank you very much in advance.

Comments

Comment posted by matthias_h

Should the link only work if there was a choice in all select boxes or should the user also be able to find all filtered entries if only in one of them is a value?

Comment posted by Berk B.

Hi Matthias, thank you so much for helping. I tried to add the code you sent to our Shopify site and succeeded in some of them. However, after selecting only a few options, 0s is added instead of the options that are not selected. gyazo.com/7dc62df3463e0e4c446fc413bb807012 Also instead of adding the options one by one, can we take it from a json file with a loop? Because there are hundreds of product options and adding them one by one will cause both the tiresome and code complexity for the site.

Comment posted by matthias_h

The line location.href = url is uncommented in the code? And strange that 0s are added for not selected options, in case a value is 0 there should be nothing added. And yes, it’s possible to take the url parts from the json file, it’s just a bit more work to invest to do so. I’ll let you know when I have adjusted it but it might take some time.

Comment posted by kolayoto.com/collections/…

Yes, I just figured out the “location.href = url” section and now it works. After selecting Yaz and 145 in the first 2 options and leaving the last 2 blank, a link like this is created.

Comment posted by Berk B.

Then I am waiting for your return to take the URL parts from the Json file and I continue to my research on this subject. Thank you very much again, best regards.

Comment posted by matthias_h

@BerkB. I’ve just updated my answer with a 2nd solution taking the values from the json file.

By

Related Post

HTML

[ANSWERED] How do you add a background image in the margins and top of the page behind the body? (Html, Css)

Nov 20, 2022
HTML

[ANSWERED] html – I can’t get my carousel buttons to respond bootstrap 4

Nov 20, 2022
HTML

[ANSWERED] javascript – Locomotive Scroll not working with Vue.js when having to load images on page

Nov 20, 2022

You missed

HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022