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

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

javascript jquery html forms

Javascript 根据下拉菜单中的选择更改div的内容,javascript,jquery,html,forms,Javascript,Jquery,Html,Forms,是否有一种简单的方法，使用JavaScript，根据用户从下拉菜单中的选择，在中动态显示/隐藏内容？例如，如果用户选择选项1，则我希望显示1，并隐藏所有其他s 编辑：示例HTMLSetup 选择1 选择2 选择3 内容1 内容2 内容3 以通过选择显示/隐藏div为例 HTML: 我太慢了。下面是我的例子：）执行任务的方法有很多，但我相信最优雅的方法是使用css。以下是基本步骤侦听选项选择事件，biding向容器添加/删除某些类操作，该操作包含您感兴趣的所有div（例如，body）添

是否有一种简单的方法，使用JavaScript，根据用户从下拉菜单中的选择，在

中动态显示/隐藏内容？例如，如果用户选择

选项1

，则我希望显示

1，并隐藏所有其他

编辑：示例

HTML

Setup


选择1
选择2
选择3
内容1
内容2
内容3

以通过选择显示/隐藏div为例

HTML:

我太慢了。下面是我的例子：）

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

侦听选项选择事件，biding向容器添加/删除某些类操作，该操作包含您感兴趣的所有div（例如，body）

添加用于隐藏除一个div之外的所有div的样式

干得好，先生如果有几个div，这会非常有效，因为要切换的元素越多，就应该编写更多的css规则。以下是基于以下步骤的更通用的解决方案，即绑定操作： 1.使用一些选择器查找所有元素（通常看起来像“.menu container.menu item”） 2.找到当前可见的已找到元素之一，然后将其隐藏 3.使另一个元素可见，即您希望在新环境下可见的元素

javascript（它是一种相当时髦的语言）

使用零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>

.inv{
显示：无；
}


选择。。。
选择1
选择2
选择3
内容1
内容2
内容3

公认的答案有两个缺点：

不要在JavaScript代码中以ID为目标。使用类和数据属性来创建
最好在加载时使用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>

CSS:

下面让我们来看看它的实际应用。

我不是一个编码员，但你可以省下几行：

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


雇用我做房地产生意
谁是好的经纪人？
我可以不付定金就买房子吗
获取我的联系信息？

这是

有。如果你表现出你目前所拥有的，你可能会得到一些帮助。更明智的做法是学习Javascript和DOM的基本知识，并学会自己编写，而不是依赖于剪切粘贴代码。如果你读了我的问题，我想我没有要求剪切/粘贴一段代码，只是一个方法。方法是在

change

事件的下拉菜单上创建一个侦听器，然后相应地更改每个

div

元素的

display

style属性。可能要在小提琴中隐藏加载中的元素。@rybo111是的，我可以，但是如果选择空选项，它会再次显示所有元素，因此这可能是一个功能。OP在他的问题中隐藏了加载中的元素，这就是我想要的效果。有什么原因让我的效果不好吗奇怪的是，在我的本地站点上运行的版本似乎部分工作，但是如果选择了另一个，它不会将“hide”类添加到option元素中，因此它只会添加到所需的行列表中displayed@Lee如果您检查JavaScript控制台，您将看到

$未定义

，这意味着jQuery尚未加载到您的小提琴上。在JSFIDLE上，添加

https://code.jquery.com/jquery-1.11.3.js

转到左侧的外部资源。啊。哇，我觉得自己很愚蠢，我以为JSFIDLE自动包含了它。好吧，那就好了。顺便说一下，我的本地版本也运行得很好，谢谢。JSFIDLE不工作！返回404。顺便说一句，jquary需要任何编译器吗？

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

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

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

.hide {
  display: none;
}

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