Изменить содержимое div на основе выбора из выпадающего меню - PullRequest
Новая
       6

Изменить содержимое div на основе выбора из выпадающего меню

25 голосов
/ 29 мая 2011

Есть ли простой способ, с помощью JavaScript, динамически отображать / скрывать содержимое в <div> на основе выбора пользователя из выпадающего меню?Например, если пользователь выбирает option 1, то я бы хотел, чтобы <div> 1 отображался, а все остальные <div> s были скрыты.

EDIT: Пример HTML Настройка 

<select>
<option> Option 1</option>
<option> Option 2</option>
<option> Option 3</option>
<select>

<div id="content_1" style="display:hidden;">Content 1<div>
<div id="content_2" style="display:hidden;">Content 2<div>
<div id="content_3" style="display:hidden;">Content 3<div>

Ответы [ 5 ]

23 голосов
/ 20 июля 2014

Принятый ответ имеет пару недостатков:

  • Не указывайте идентификаторы в своем коде JavaScript. Используйте классы и атрибуты данных, чтобы избегать повторения вашего кода .
  • Рекомендуется прятаться с помощью CSS при загрузке, а не с JavaScript - для поддержки пользователей, не поддерживающих JavaScript, и предотвращения мерцания при загрузке.

Учитывая вышеизложенное, ваши параметры могут даже иметь разные значения, но переключать один и тот же класс: 

<select class="div-toggle" data-target=".my-info-1">
  <option value="orange" data-show=".citrus">Orange</option>
  <option value="lemon" data-show=".citrus">Lemon</option>
  <option value="apple" data-show=".pome">Apple</option>
  <option value="pear" data-show=".pome">Pear</option>
</select>

<div class="my-info-1">
  <div class="citrus hide">Citrus is...</div>
  <div class="pome hide">A pome is...</div>
</div>

JQuery: 

$(document).on('change', '.div-toggle', function() {
  var target = $(this).data('target');
  var show = $("option:selected", this).data('show');
  $(target).children().addClass('hide');
  $(show).removeClass('hide');
});
$(document).ready(function(){
    $('.div-toggle').trigger('change');
});

CSS: 

.hide {
  display: none;
}

Вот JSFiddle , чтобы увидеть его в действии.

17 голосов
/ 29 мая 2011

это jsfiddle с примером показа / скрытия элементов div с помощью выбора.

HTML: 

<div id="option1" class="group">asdf</div>
<div id="option2" class="group">kljh</div>
<div id="option3" class="group">zxcv</div>
<div id="option4" class="group">qwerty</div>
<select id="selectMe">
  <option value="option1">option1</option>
  <option value="option2">option2</option>
  <option value="option3">option3</option>
  <option value="option4">option4</option>
</select>

jQuery: 

$(document).ready(function () {
  $('.group').hide();
  $('#option1').show();
  $('#selectMe').change(function () {
    $('.group').hide();
    $('#'+$(this).val()).show();
  })
});
15 голосов
/ 20 июля 2014

с нулевым jQuery 

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <style>
.inv {
    display: none;
}
    </style>
    <body>
        <select id="target">
            <option value="">Select...</option>
            <option value="content_1">Option 1</option>
            <option value="content_2">Option 2</option>
            <option value="content_3">Option 3</option>
        <select>

        <div id="content_1" class="inv">Content 1</div>
        <div id="content_2" class="inv">Content 2</div>
        <div id="content_3" class="inv">Content 3</div>

        <script>
            document
                .getElementById('target')
                .addEventListener('change', function () {
                    'use strict';
                    var vis = document.querySelector('.vis'),   
                        target = document.getElementById(this.value);
                    if (vis !== null) {
                        vis.className = 'inv';
                    }
                    if (target !== null ) {
                        target.className = 'vis';
                    }
            });
        </script>
    </body>
</html>
8 голосов
/ 29 мая 2011

Мех слишком медленно. В любом случае, вот мой пример:)
http://jsfiddle.net/cqDES/

$(function() {
    $('select').change(function() {
        var val = $(this).val();
        if (val) {
            $('div:not(#div' + val + ')').slideUp();
            $('#div' + val).slideDown();
        } else {
            $('div').slideDown();
        }
    });
});
0 голосов
/ 29 мая 2011

Есть много способов выполнить вашу задачу, но я считаю, что наиболее элегантным является использование css.Вот основные шаги

  1. Событие выбора опции прослушивания, связывающее добавление / удаление некоторого класса в действие контейнера, которое содержит все интересующие вас div (например, body)
  2. Добавление стилейдля сокрытия всех div, кроме одного.
  3. Молодец, сэр.

Это работает очень хорошо, если есть несколько делений, так как чем больше элементов вы хотите переключить, тем больше должно быть написано правил CSS.Вот более общее решение, связывающее действие, основанное на следующих шагах: 1. найти все элементы, используя некоторый селектор (обычно это выглядит как «.menu-container .menu-item») 2. найти один из найденных элементов, который является текущим видимым, скройте его 3. сделайте видимым другой элемент, тот, который вы хотите видеть в новых обстоятельствах.

javascript это довольно скромный язык)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...