javascript - 从选择下拉列表中显示/隐藏 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。

这是一个工作 fiddle :http://jsfiddle.net/JYbq2/