Хобрук: Ваш путь к мастерству в программировании

Параметры флажка не скрываются

привет всем: в настоящее время я работаю над проектом, в котором пользователь выберет пункт раскрывающегося меню, который затем откроет ряд флажков. Он работал до сих пор, когда некоторые флажки отображаются несмотря ни на что, и когда я выбираю раскрывающийся список, он ничего не показывает. Это мой код до сих пор:

<select id="select" onchange="test(this)">
    <option>hi0</option>
    <option>hi1</option>
    <option>hi2</option>
    <option>hi3</option>
    <option>hi4</option>
    <option>hi5</option>
    <option>hi6</option>
    <option>hi7</option>
</select>

<form id="option1">
<input type="checkbox" name="Color" value="School Color">The  are a solid school color.
<br>
<input type="checkbox" name="Hem" value="Hem">The  are hemmed.
<br>
<input type="checkbox" name="Size" value="Size">The pants are not to big or small.
<br>
<input type="checkbox" name="Style" value="Style">The pants are not sweats or jogging style.
</form>

<form id="option2">
<input type="checkbox" name="Color" value="School Color">The shorts are a solid school color.
<br>
<input type="checkbox" name="Length" value="Length">The shorts are not shorter than your fingertip, or longer than your knees. (Capris okay.)
</form>

<form id="option3">
<input type="checkbox" name="Color" value="School Color">The skirt is a solid school color.
<br>
<input type="checkbox" name"Length" value="Length">The skirt is not shorter than your fingertip.
</form>

<form id="option4">
<input type="checkbox" name="Color" value="School Color">The shirt is a solid school color.
<br>
<input type="checkbox" name="Collar" value="Collar">The shirt has a collar or a turtleneck.
<br>
<input type="checkbox" name="Tuck" value="Tuck">The shirt is long enough to be tucked in.
<br>
<input type="checkbox" name="Logo" value="Logo">The shirt has no logos-Baird logo is accepted.
</form>

<form id="option5">
<input type="checkbox" name="Color" value="School Color">The belt is a solid school color.
<br>
<input type="checkbox" name="Decorations" value="Decorations">The belt has no studs or decorations.
<br>
<input type="checkbox" name="Buckle" value="Buckle">The belt buckle is solid.
<br>
<input type="checkbox" name="Excess" value="Excess">The belt has no excess length (does not hang down).
</form>

<form id="option6">
<input type="checkbox" name="Color" value="School Color">Hair accessories are a solid school color.
</form>

<form id="option7">
<input type="checkbox" name="Color" value="School Color">The shoes and laces are a solid school color.<br>
<input type="checkbox" name="Strap" value="Strap">If the shoes are sandals, they have a back strap.<br>
<input type="checkbox" name="Style" value="Style>The shoes are not high heels, platforms, or steel-toed.
</form>

а вот css и javascript:

<head>
<style>
#option1 {
display: none;
}
#option2 {
display: none;
}
#option3 {
display: none;
}
#option4 {
display: none;
}
#option5 {
display: none;
}
#option6 {
display: none;
}
#option7 {
display: none;
}
</style>

<script language="javascript">
// simple <select> / onchange

function test(e) {
    var i = e.selectedIndex;
   if (i == 1) document.querySelector("#option1").style.display=
"block";
   if (i == 2) document.querySelector("#option2").style.display=
"block";
   if (i == 3) document.querySelector("#option3").style.display= "block";
   if (i == 4) document.querySelector("#option4").style.display=
"block";
   if (i == 5) document.querySelector("#option5").style.display=
"block";
   if (i == 6) document.querySelector("#option6").style.display=
"block";
   if (i == 7) document.querySelector("#option7").style.display=
"block";
}
</script>
</head>

я понимаю, что это много, но может ли кто-нибудь дать совет, чтобы первый набор флажков не отображался, несмотря ни на что, и почему они не открываются? Любая помощь приветствуется!


  • Почему бы вам не показать нам демо в jsfiddle! 03.01.2014

Ответы:


1

Я бы лично предложил:

function test(el){
    // gets all form-elements:
    var forms = document.querySelectorAll('form');

    // iterates over all the form-elements, hiding them
    [].forEach.call(forms, function(a){
        a.style.display = 'none';
    });

    // retrieves the form-element with the given 'id', and shows it:
    document.querySelector('#option' + (el.selectedIndex)).style.display = 'block';
}

демонстрация JS Fiddle.

Вышеупомянутое требует довольно современного браузера (но поскольку вы уже используете document.querySelector(), я воспринимаю совместимость как данность), чтобы использовать document.querySelectorAll() и Array.prototype.forEach().

Рекомендации:

03.01.2014
  • Я могу понять других, но [].forEach.call методом я не могу это понять. Не могли бы вы объяснить эту часть? 03.01.2014

  • 2

    Ваш JavaScript содержит код для отображения соответствующего div. Он не содержит кода для скрытия ранее показанного контента.

    Вы можете увидеть ответ на следующий вопрос, чтобы получить представление.

    Как скрыть и показать контент на основе раскрывающегося списка выбор

    03.01.2014

    3
  • добавить некоторые пояснения здесь. 03.01.2014
  • Кроме того, вам не хватает закрывающей кавычки для атрибута value последнего элемента ввода. В исходном вопросе его тоже не было. 03.01.2014
  • Новые материалы

    Создание кнопочного меню с использованием HTML, CSS и JavaScript
    Вы будете создавать кнопочное меню, которое имеет состояние наведения, а также позволяет вам выбирать кнопку при нажатии на нее. Финальный проект можно увидеть в этом Codepen . Шаг 1..

    Внедрите OAuth в свои веб-приложения для повышения безопасности
    OAuth — это широко распространенный стандарт авторизации, который позволяет приложениям получать доступ к ресурсам от имени пользователя, не раскрывая его пароль. Это позволяет пользователям..

    Классы в JavaScript
    class является образцом java Script Object. Конструкция «class» позволяет определять классы на основе прототипов с чистым, красивым синтаксисом. // define class Human class Human {..

    Как свинг-трейдеры могут использовать ИИ для больших выигрышей
    По мере того как все больше и больше профессиональных трейдеров и активных розничных трейдеров узнают о возможностях, которые предоставляет искусственный интеллект и машинное обучение для улучшения..

    Как построить любой стол
    Я разработчик программного обеспечения. Я люблю делать вещи и всегда любил. Для меня программирование всегда было способом создавать вещи, используя только компьютер и мое воображение...

    Обзор: Машинное обучение: классификация
    Только что закончил третий курс курса 4 часть специализации по машинному обучению . Как и второй курс, он был посвящен низкоуровневой работе алгоритмов машинного обучения. Что касается..

    Разработка расширений Qlik Sense с qExt
    Использование современных инструментов веб-разработки для разработки крутых расширений Вы когда-нибудь хотели кнопку для установки переменной в приложении Qlik Sense? Когда-нибудь просили..