Итак, у меня есть куча информации для группы разных стран, и я пытаюсь ее отсортировать так:
Выпадающее меню, чтобы выбрать страну → Выпадающее меню, чтобы выбрать тип информации → здесь ссылка на эту информацию
Я не так хорош с javascript, но я нашел это решение, которое позволяет мне изменять содержимое второго раскрывающегося списка на основе выбора, выбранного из первого раскрывающегося списка:
<script type="text/javascript">
function configureDropDownLists(ddl1, ddl2) {
var albania = new Array('History', 'Legal Guides');
var andorra = new Array('Country Overview', 'Demographics', 'Legal Guides');
switch (ddl1.value) {
case 'Albania':
document.getElementById(ddl2).options.length = 0;
for (i = 0; i < albania.length; i++) {
createOption(document.getElementById(ddl2), albania[i], albania[i]);
}
break;
case 'Andorra':
document.getElementById(ddl2).options.length = 0;
for (i = 0; i < andorra.length; i++) {
createOption(document.getElementById(ddl2), andorra[i], andorra[i]);
}
break;
}
}
function createOption(ddl, text, value) {
var opt = document.createElement('option');
opt.value = value;
opt.text = text;
ddl.options.add(opt);
}
</script>
А затем выпадающие окна, в HTML:
<select id="ddl" onchange="configureDropDownLists(this,'ddl2')">
<option value=""></option>
<option value="Albania">Albania</option>
<option value="Andorra">Andorra</option>
</select>
<select id="ddl2">
</select>
Так что теперь мне интересно, как я могу принять этот вторичный выбор и использовать его для создания списка ссылок для кого-то на выбор - скажем, в новом абзаце текста или что-то в этом роде.
Первый раз задавая вопрос здесь, извините, если сбивать с толку.
Сначала добавьте куда-нибудь этот список ссылок. Я бы поместил его в неупорядоченный список (<ul></ul>
). Но вы могли бы просто поместить его в абзац или div.
Я предполагаю, что вы знаете об объектах и цикл for/in. Если нет, это поможет вам получить его: https://javascriptweblog.wordpress.com/2011/01/04/exploring-javascript-for-in-loops/
Вот код, который я сделал для вас. Я прокомментировал это на этом пути. Просто спросите, если что-то неясно :) Албания Андорра
<select id="ddl2" onchange="configureDropDownLists('ddl2')">
</select>
<ul id='linkList'></ul>
<script type="text/javascript">
function configureDropDownLists(ddlBeingChanged) {
var ddl = document.getElementById('ddlBeingChanged');
var ddl1ChosenValue=document.getElementById('ddl1').value;
var linkLists = {
albania: {
"history": ['http://albania.example.com/history', 'http://albania.example.com/historyTwo'],
"legal guides": ['http://albania.example.com/guide', 'http://albania.example.com/guideTwo'],
},
andorra: {
"country overview": ['http://andorra.example.com/country', 'http://andorra.example.com/overview'],
"demographics": ['http://andorra.example.com/demographics', 'http://andorra.example.com/demographicsTwo'],
"legal guides": ['http://andorra.example.com/guide', 'http://andorra.example.com/guideTwo'],
}
};
if (ddlBeingChanged == "ddl1") {
console.log(ddl1ChosenValue);
for (var ddl2 in linkLists[ddl1ChosenValue]){
console.log(ddl2);
// Here the ddl2 variable will contain the first level of the object 'linkLists'. I.E. the country names.
createOption(document.getElementById('ddl2'), ddl2, ddl2);
}
} else if (ddlBeingChanged == "ddl2") {
var ddl2ChosenValue=document.getElementById('ddl2').value;
var linkArray=linkLists[ddl1ChosenValue][ddl2ChosenValue];
// The linkArray:
// Let say someone chose andorra and demographics
// then linkLists[ddl1ChosenValue][ddl2ChosenValue] would be equivalent to linkLists.andorra.demographics
var linkListHTML="";
for (var i in linkArray){
var URL=linkArray[i];
linkListHTML+="<li><a href='"+URL+"'>"+URL+"</a></li>";
}
document.getElementById('linkList').innerHTML=linkListHTML;
}
}
function createOption(ddl, text, value) {
var opt = document.createElement('option');
opt.value = value;
opt.text = text;
ddl.options.add(opt);
}
</script>
Изменение: Исправлены ошибки в коде
<select>
имеет две опцииa
иb
, какие опции должны быть представлены во втором элементе<select>
? И как вариант, выбранный во втором<select>
повлияет на ссылки, которые будут представлены?