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

Question

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

Tho*_*mas 26 html javascript forms jquery

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

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

ryb*_*111 24

接受的答案有几个缺点:

不要在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>

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

CSS:

.hide {
  display: none;
}

Run Code Online (Sandbox Code Playgroud)

这是一个可以看到它的JSFiddle.

@Lee 如果您检查 JavaScript 控制台，您会看到“$ 未定义”，这意味着 jQuery 尚未加载到您的小提琴上。在 JSFiddle 上，将 `https://code.jquery.com/jquery-1.11.3.js` 添加到左侧的外部资源。 (2认同)

Answer 2

nat*_*lez 17

这里有一个jsfiddle,有一个通过select显示/隐藏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>

Run Code Online (Sandbox Code Playgroud)

jQuery的:

$(document).ready(function () {
  $('.group').hide();
  $('#option1').show();
  $('#selectMe').change(function () {
    $('.group').hide();
    $('#'+$(this).val()).show();
  })
});

Run Code Online (Sandbox Code Playgroud)

演示链接无效.你能更新一下吗？ (5认同)
把它放在小提琴中并不难：P https://jsfiddle.net/master1991/4y0kpxnq/ (2认同)

Answer 3

Iva*_*nov 16

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

Run Code Online (Sandbox Code Playgroud)

Answer 4

And*_*ndy 8

呃太慢了.无论如何,这是我的例子:)
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();
        }
    });
});

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，5 月前
查看次数：	99401 次
最近记录：	6 年，3 月前