Сначала я скажу вам, что я хочу получить. пользователь в первом раскрывающемся списке выбирает производителя, а во втором раскрывающемся списке типы обуви, назначенные этому производителю, дополняют его, если он выбирает в следующем раскрывающемся списке размеры, которые будут показаны - в этот момент после нажатия на размер он переместит его к данная ссылка. как это сделать? может уже есть какой-то готовый шаблон? Прошу помощи, хотя как задать вопрос в гугле и получить готовый шаблон
<!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"
}