I will tell you first what I want to get. the user in the first dropdown selects the manufacturer, in the second dropdown the types of shoes assigned to that manufacturer complement, if he chooses in the next dropdown the sizes will be shown - at this point after clicking the size he will move him to the given link. how to do that? maybe there is already some ready template? I am asking for help, although how to ask a question in google and get a ready template
<!DOCTYPE html><html><head><meta charset='UTF-8'><title>title</title><link rel='stylesheet' href='css/style.css'><script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script>
$(function() {
$("#text-one").change(function() {
$("#text-two").load("textdata/" + $(this).val() + ".txt");
});
$("#json-one").change(function() {
var $dropdown = $(this);
$.getJSON("jsondata/data.json", function(data) {
var key = $dropdown.val();
var vals = [];
switch(key) {
case 'q1':
vals = data.q1.split(",");
break;
case 'q2':
vals = data.q2.split(",");
break;
case 'base':
vals = ['Please choose from above'];
}
var $jsontwo = $("#json-two");
$jsontwo.empty();
$.each(vals, function(index, value) {
$jsontwo.append("<option>" + value + "</option>");
});
});
});
$("#json-two").change(function() {
var $dropdown = $(this);
$.getJSON("jsondata/data.json", function(data) {
var key = $dropdown.val();
var vals = [];
switch(key) {
case 'q3':
vals = data.q3.split(",");
break;
case 'q4':
vals = data.q4.split(",");
break;
case 'base':
vals = ['Please choose from above'];
}
var $jsonthree = $("#json-three");
$jsonthree.empty();
$.each(vals, function(index, value) {
$jsonthree.append("<option>" + value + "</option>");
});
});
});
});
</script></head><body><div id="page-wrap"><h1>Header</h1><select id="json-one"><option selected value="base">Please Select</option><option value="q1">Question 1</option><option value="q2">Question 2</option></select><br /><select id="json-two"><option>Please choose from above</option></select><br><select id="json-three"><option>Please choose from above</option></select></div></body></html>{"q1": "a1,a2,a3,a4","q2": "ab1,ab2,ab3,ab4","q3": "abc1,abc2","q4": "abcd1,abcd2,abcd3"
}