web-dev-qa-db-ja.com

ドロップダウンメニューからの選択に基づいてdivのコンテンツを変更する

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>
javascriptjqueryhtmlforms
25
Thomas

こちらは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>

jQuery：

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

受け入れられた答えには、いくつかの欠点があります。

  • JavaScriptコードでIDをターゲットにしないでください。 コードの繰り返しを避ける にクラスとデータ属性を使用します。
  • JavaScriptではなくCSSを使用して非表示にすることをお勧めします。非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;
}

これが JSFiddle の動作を確認するためのものです。

23
rybo111

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>
15
Ivan Ivanov

遅すぎる。とにかく私の例です:)
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();
        }
    });
});
8
Andy

私はコーダーではありませんが、数行節約できます。

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

デモ です。

0
user2060451