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

基于用户从下拉菜单中选择，是否有一种使用JavaScript动态显示/隐藏<div>中的内容的简单方法？例如，如果用户选择option 1，那么我想要显示<div> 1，并且隐藏所有其他<div>。根据下拉菜单中的选择更改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>

来源

2011-05-28 Thomas

是的。如果你显示你到目前为止，你可能会得到一些帮助。更明智的做法是学习Javascript和DOM的基础知识，并学会自己编写它，而不是依靠剪切和粘贴代码。 – lonesomeday 2011-05-28 21:42:28

嗯，我真的只是在寻找一种技术。如果你阅读我的问题，我不认为我要求剪切/粘贴一段代码，只是一种方法。 – Thomas 2011-05-28 21:45:31

该方法是在'change'事件的下拉菜单上创建一个监听器，然后相应地更改每个'div'元素的'display'样式属性。 – lonesomeday 2011-05-28 21:47:21

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

来源

2011-05-28 21:47:36

演示链接不起作用。你能更新它吗？ – neophyte 2017-05-08 12:02:18

jsfiddle不起作用！返回404. BTW jquary需要任何编译器？ – 2018-02-28 13:16:20

咩太慢。这里是我的榜样呢:)
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(); 
     } 
    }); 
});

来源

2011-05-28 21:49:50 Andy

可能希望隐藏加载在您小提琴上的元素。 – rybo111 2014-07-20 10:36:45

@ rybo111是的，我可以，但如果你选择空白选项，它会再次显示它们，所以它可能是一个功能。 – Andy 2014-07-20 14:27:32

OP在他的问题中隐藏了他们的负载，所以这是期望的效果。 – rybo111 2014-07-21 18:08:51

-1

有许多方法来执行你的任务，但最优雅的是，我相信，使用CSS。下面是基本步骤

听力选项评选活动，伺机添加/删除一些类容器的动作，其中包含你有兴趣（例如，人体）
添加样式隐藏所有div除了所有div一。
干得好，先生。

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

的JavaScript它相当timtoady语言）

来源

2011-05-28 21:52:05 shabunc

有了零的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>

来源

2014-07-20 09:59:48

接受的答案有几个缺点：

不要在定位在JavaScript代码标识。使用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看到它在行动。

来源

2014-07-20 10:18:56 rybo111

为什么我的人似乎不工作？ http://jsfiddle.net/fuvxkzkd/ - 非常奇怪的是，我的本地站点上运行的版本确实似乎不起作用，但如果选择另一个选项，它不会将“隐藏”类添加到选项元素，所以它只是添加到显示的行的列表 – Lee 2015-12-15 10:25:14

@Lee如果您检查了JavaScript控制台，您会看到'$ is not defined'，这意味着jQuery尚未加载到您的小提琴上。在JSFiddle上，将'https：// code.jquery.com/jquery-1.11.3.js'添加到左侧的外部资源。 – rybo111 2015-12-15 12:46:52

啊。哇，我觉得愚蠢，我认为JSfiddle自动包含它。好的，那会好起来的。顺便说一下，我设法让我的本地版本也能正常工作，谢谢。 – Lee 2015-12-15 14:00:41

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

回答

相关问题