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/

从选择下拉菜单中显示/隐藏DIV

1 个答案: