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

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

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>

Ответы

Ответ 1

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

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();
  })
});

Ответ 2

В принятом ответе есть несколько недостатков:

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

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

<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, чтобы увидеть его в действии.

Ответ 3

С нулевым 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>

Ответ 4

Мех слишком медленный. Вот мой пример в любом случае:)
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();
        }
    });
});

Ответ 5

Я не кодер, но вы могли бы сохранить несколько строк:

<div>
            <select onchange="if(selectedIndex!=0)document.getElementById('less_is_more').innerHTML=options[selectedIndex].value;">
                <option value="">hire me for real estate</option>
                <option value="me!!!">Who is a good Broker? </option>
                <option value="yes!!!">Can I buy a house with no down payment</option>
                <option value="send me a note!">Get my contact info?</option>
            </select>
        </div>

<div id="less_is_more"></div>

Вот демо.

Ответ 6

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

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

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

javascript это довольно timtoady язык)