從選擇下拉菜單中顯示/隱藏DIV

Question

我有以下代碼來切換變量DIV：

$('#'+content_id).toggle(option.hasClass(show_class));

我試圖通過將所選值和DIV的名稱連接到一個字符串中來獲取變量ID。 我沒有正確命名變量，或者將變量放置在錯誤的位置。

完整代碼如下：

HTML

<select name="select_name" id="select_id" class="select_class" data-inline="true">
    <option class="show1" value="1">1</option>
    <option class="show2" value="2">2</option>
    <option class="show3" value="3">3</option>
    <option class="show4" value="4">4</option>
</select>

<div id="content1">Div 1</div>
<div id="content2">Div 2</div>
<div id="content3">Div 3</div>
<div id="content4">Div 4</div>

<div id="testdiv"></div>
<div id="testdiv2"></div>
<div id="testdiv3"></div>

JS

$(function() {
    $('#select_id').change(function() {
        var option = $(this).find('option:selected');

        var OptVal = document.getElementById('select_id').value;
        document.getElementById("testdiv").innerHTML = OptVal;

        var show_class = "show" + OptVal;
        document.getElementById("testdiv2").innerHTML = show_class;

        var content_id = "content" + OptVal;
        document.getElementById("testdiv3").innerHTML = content_id;

        $('#'+content_id).toggle(option.hasClass(show_class));

    }).change();
});

Answer 1

我猜想您只想在下拉列表中顯示選定選項的div。

這是您的html：

<select name="select_name" id="select_id" class="select_class" data-inline="true">
    <option class="show1" value="1">1</option>
    <option class="show2" value="2">2</option>
    <option class="show3" value="3">3</option>
    <option class="show4" value="4">4</option>
</select>
<div id="content1" class="content">Div 1</div>
<div id="content2" class="content">Div 2</div>
<div id="content3" class="content">Div 3</div>
<div id="content4" class="content">Div 4</div>
<div id="testdiv"></div>
<div id="testdiv2"></div>
<div id="testdiv3"></div>

我向div添加了一個內容類，以輕松選擇所有它們。

JavaScript的：

$(function () {
    $('#select_id').change(function () {
        var option = $(this).find('option:selected');

        var OptVal = document.getElementById('select_id').value;
        document.getElementById("testdiv").innerHTML = OptVal;

        var show_class = "show" + OptVal;
        document.getElementById("testdiv2").innerHTML = show_class;

        var content_id = "content" + OptVal;
        document.getElementById("testdiv3").innerHTML = content_id;

        $('.content').hide();

        $('#' + content_id).show();

    }).change();
});

我添加了$('.content').hide(); 隱藏所有的div，然后我使用$('#' + content_id).show(); 顯示選定的div。

這是一個工作中的小提琴： http : //jsfiddle.net/JYbq2/