Question

是否有一种简单的方法，使用JavaScript，根据下拉菜单中的用户选择动态显示/隐藏<div>中的内容？例如，如果用户选择option 1，那么我希望显示<div> 1并隐藏所有其他<div>。

编辑：示例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>

Answer 1

接受的答案有几个缺点：

不要在JavaScript代码中定位ID。使用avoid repeating your code的类和数据属性。
最好在加载时使用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;
}

此处a JSFiddle可以看到它的实际效果。

Answer 2

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

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

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

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

这里是demo。

Answer 6

有很多方法可以执行你的任务，但我相信，最优雅的是使用css。以下是基本步骤

听取选项选择事件，向容器操作添加/删除某个类，其中包含您感兴趣的所有div（例如，body）
添加样式以隐藏除一个之外的所有div。
干得好，先生。

如果有几个div，这很有效，因为要切换的元素越多，就应该编写更多的css规则。这是更通用的解决方案，绑定操作，基于以下步骤： 1.使用某个选择器查找所有元素（通常看起来像'.menu-container .menu-item'） 2.找到一个当前可见的找到的元素，隐藏它 3.使另一个元素可见，在新环境下你希望看到的元素。

javascript它是一种相当timtoady的语言）

根据下拉菜单中的选择更改div的内容

6 个答案: