Простой вариант выбора раскрывающегося списка | отображение в зависимости от выбранных опций

Ниже я вставляю код для простого раскрывающегося списка с некоторыми параметрами.

Выберите модуль:

<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 из первого раскрывающегося списка.

Может ли кто-нибудь помочь мне, как решить эту проблему?

Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
Современные подходы к организации и работе с CSS в проекте
Современные подходы к организации и работе с CSS в проекте
Любой, кто писал CSS в течение некоторого времени, знает о сложностях, которые с этим связаны, и о том, насколько это может быть болезненно.
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Я люблю Tailwind. Раньше я относился к нему с подозрением, но как только я попробовал его использовать, я был поражен тем, сколько времени он мне...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
Поговорим о глассморфизме (Glassmorphism)
Поговорим о глассморфизме (Glassmorphism)
В 2021 году Glassmorphism был огромным трендом в веб-дизайне. Я всегда люблю размытость в UI / UX, она делает пользовательский интерфейс более богатым...
0
0
22
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

@Ребята, спасибо за помощь. Работает идеально. Могу я спросить еще об одном? Есть ли у вас какое-либо решение, если я выберу пример модуля 1 и сервера 1, а затем отобразлю дополнительный текст? и когда я выбираю модуль1 и сервер2, тогда также в раскрывающихся списках отображается другой пользовательский текст, назначенный выбранной опции?

Jan Kowalski 17.05.2022 21:48

Вы можете изменить «id = s1, id = s2 ...» на любое место, где хотите отобразить.

Kazakh 18.05.2022 02:44

Другие вопросы по теме