使用jQuery根据选择选项切换div

Question

使用jQuery根据选择选项切换div

4

我需要从下拉选择框中切换div。我希望它类似于jquery的asmselect，但不是列出选项标签，而是显示隐藏的div。是否有类似的东西？或者有人知道如何设置它？谢谢，Jeff。

更新：

基本上我想要的是asmselect链接的外观和交互，但是切换div而不是生成列表。以下是示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jQuery1.3.js"></script>
<script type="text/javascript">

$(document).ready(function(){

    $("#theSelect").change(function(){          
        $("#theSelect option:selected").click(function(){
            var value = $(this).val();
            var theDiv = $(".is" + value);

            $(theDiv).toggle(function(){
                $(this).removeClass("hidden");
            }),function(){
                $(this).addClass("hidden");
            }
        }); 
    });

});

</script>
<style type="text/css">
.hidden {
    display: none;
}
</style>
</head>

<body>
    <div class="selectContainer">
        <select id="theSelect">
            <option value="">- Select -</option>
            <option value="Patient">Patient</option>
            <option value="Physician">Physician</option>
            <option value="Nurse">Nurse</option>
        </select>
    </div>
    <div class="hidden isPatient">Patient</div>
    <div class="hidden isPhysician">Physician</div>
    <div class="hidden isNurse">Nurse</div>
</body>
</html>

- Jeffrey

你能具体说明一下你的要求吗？我不确定我理解你在问什么。 - gurun8

3个回答

2

列表选项和div标签可以用相同的方式进行识别和切换。

$('#div_id').toggle();

因此，不需要像你提到的asmselect插件一样使用元素选择器来选择选项标签，只需修改元素选择器以选择页面上的div标签即可。

- Jeremy

谢谢Jeremy。我似乎无法使它工作，你能看一下我上面的代码吗？ - Jeffrey

实际上，这段代码看起来不错，我能够让它工作。你看到了什么错误？我的唯一建议是更改定义theDiv的行，将其更改为字符串而不是元素对象。例如：var theDiv = ".is" + value;这样，您将调用$(theDiv)，就像我所做的那样。但是正如我所说，你的方式对我来说完全没问题。发布错误以及您使用的浏览器，也许我可以提供不同的建议。 - Jeremy

尝试更改theDiv的值并在webkit上进行测试。我猜那样会解决问题。我想为您尝试，但我没有访问webkit浏览器的权限。 - Jeremy

0

使用之前提到的 .change() 方法，但结合 jQuery 的 .show() 和/或 .hide() 方法：

    if($(this).val() == 'selected_option') {
        $('.selector1').show(); //displays element with display:none;        
    } else {
        $('.selector1').hide(); //hides element again
    }

- TomoMiha

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user113716 · Accepted Answer

你是否在寻找类似这样的内容？http://jsfiddle.net/tYvQ8/

$("#theSelect").change(function() {          
    var value = $("#theSelect option:selected").val();
    var theDiv = $(".is" + value);

    theDiv.slideDown().removeClass("hidden");
    theDiv.siblings('[class*=is]').slideUp(function() { $(this).addClass("hidden"); });
});

当选择选项发生变化时，您需要：

使用 slideDown() 显示所选的 div 并删除其 hidden 类。
查找带有“is”类名的 div 的兄弟元素。（如果菜单不是兄弟元素，则会更容易。）
使用 slideUp() 隐藏先前显示的兄弟元素，并在 slideUp() 完成后添加回调以添加 hidden 类。

以下是另一种（我认为更好的）方法： http://jsfiddle.net/tYvQ8/1/

去掉您的 hidden 类，并使用 jQuery 隐藏它们。然后您就不必担心添加和删除类了。

没有 hidden 类的 HTML：

<body>
    <div class="selectContainer">
        <select id="theSelect">
            <option value="">- Select -</option>
            <option value="Patient">Patient</option>
            <option value="Physician">Physician</option>
            <option value="Nurse">Nurse</option>
        </select>
    </div>
    <div class="isPatient">Patient</div>
    <div class="isPhysician">Physician</div>
    <div class="isNurse">Nurse</div>
</body>

jQuery

$('[class^=is]').hide();

$("#theSelect").change(function(){          
    var value = $("#theSelect option:selected").val();
    var theDiv = $(".is" + value);

    theDiv.slideDown();
    theDiv.siblings('[class^=is]').slideUp();
});