Ниже я вставляю код для простого раскрывающегося списка с некоторыми параметрами.
Выберите модуль:
<select name="modules" id="module-select">
<option value="">--Please choose an option--</option>
<option value="module1">Module1</option>
<option value="module2">Module2</option>
<option value="module3">Module3</option>
<option value="module4">Module4</option>
<option value="module5">Module5</option>
<option value="module6">Module6</option>
</select>
<br /><br /><br />
<!-- options for module 1 --->
<label for="server-select">Choose a server:</label>
<select name="servers" id="server-select">
<option value="">--Please choose an option--</option>
<option value="server1">Server1</option>
<option value="server2">Server2</option>
<option value="server3">Server3</option>
<option value="server4">Server4</option>
<option value="server5">Server5</option>
<option value="server6">Server6</option>
</select>
<br /><br /><br />
<!-- options for module 2 --->
<label for="server-select">Choose a server:</label>
<select name="servers" id="server-select">
<option value="">--Please choose an option--</option>
<option value="server1">Server1</option>
<option value="server2">Server2</option>
<option value="server3">Server3</option>
<option value="server4">Server4</option>
<option value="server5">Server5</option>
<option value="server6">Server6</option>
</select>
<!-- etc -->
<style>
label,
footer {
font-family: sans-serif;
}
label {
font-size: 1rem;
padding-right: 10px;
}
select {
font-size: .9rem;
padding: 2px 5px;
}
footer {
font-size: .8rem;
position: absolute;
bottom: 30px;
left: 30px;
}
.output {
background: center/cover no-repeat url('/media/cc0-images/hamster.jpg');
position: relative;
}
</style>
Мне нужны параметры отображения для модуля 1, если клиент выбирает из первого выпадающего модуля1 Мне нужны параметры отображения для модуля 2, если клиент выбирает модуль 2 из первого раскрывающегося списка.
Может ли кто-нибудь помочь мне, как решить эту проблему?
var el = document.getElementById("module-select");
el.addEventListener("change", choosemodule, false);
function choosemodule() {
var m = document.getElementsByClassName('h');
for (i = 0; i < m.length; i++) {
m[i].style.display = 'none';
}
var n = document.getElementById("module-select").selectedIndex;
if (n > 0) {
document.getElementById('s' + n).style.display = 'block';
}
}
label,
footer {
font-family: sans-serif;
}
label {
font-size: 1rem;
padding-right: 10px;
}
select {
font-size: .9rem;
padding: 2px 5px;
}
footer {
font-size: .8rem;
position: absolute;
bottom: 30px;
left: 30px;
}
.output {
background: center/cover no-repeat url('/media/cc0-images/hamster.jpg');
position: relative;
}
.h {
display: none;
}
<select name="modules" id="module-select">
<option value="">--Please choose an option--</option>
<option value="module1">Module1</option>
<option value="module2">Module2</option>
<option value="module3">Module3</option>
<option value="module4">Module4</option>
<option value="module5">Module5</option>
<option value="module6">Module6</option>
</select>
<br /><br /><br />
<div id="s1" class="h">
<!-- options for module 1 --->
<label for="server-select">Choose a server 1:</label>
<select name="servers">
<option value="">--Please choose an option--</option>
<option value="server1">Server1</option>
<option value="server2">Server2</option>
<option value="server3">Server3</option>
<option value="server4">Server4</option>
<option value="server5">Server5</option>
<option value="server6">Server6</option>
</select>
</div>
<br /><br /><br />
<!-- options for module 2 --->
<div id="s2" class="h">
<label for="server-select">Choose a server 2:</label>
<select name="servers">
<option value="">--Please choose an option--</option>
<option value="server1">Server1</option>
<option value="server2">Server2</option>
<option value="server3">Server3</option>
<option value="server4">Server4</option>
<option value="server5">Server5</option>
<option value="server6">Server6</option>
</select>
</div>
<div id="s3" class="h">s3</div>
<div id="s4" class="h">s4</div>
<div id="s5" class="h">s5</div>
<div id="s6" class="h">s6</div>
<!-- etc -->
Вы можете изменить «id = s1, id = s2 ...» на любое место, где хотите отобразить.
@Ребята, спасибо за помощь. Работает идеально. Могу я спросить еще об одном? Есть ли у вас какое-либо решение, если я выберу пример модуля 1 и сервера 1, а затем отобразлю дополнительный текст? и когда я выбираю модуль1 и сервер2, тогда также в раскрывающихся списках отображается другой пользовательский текст, назначенный выбранной опции?