Question

我需要从下拉选择框中切换div。我希望jquery与asmselect类似，但不是列出选项标签，而是希望它显示隐藏的div。那里有这样的东西吗？或者任何人都知道如何设置它？谢谢，杰夫。

已更新

基本上我想要的是上面的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>

Answer 1

你在找这样的东西吗？ 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"); });
});

当选择选项更改时，您

使用div显示所选slideDown()并删除其hidden课程。
找到班级名称中包含“是”的div个兄弟姐妹。（如果菜单不是兄弟姐妹，会更容易。）
使用slideUp()隐藏之前显示的兄弟姐妹，在hidden完成后接受回调以添加slideUp()课程

这是另一种（在我看来，更好）的方式： http://jsfiddle.net/tYvQ8/1/

摆脱你的hidden类，并使用jQuery来隐藏它们。然后您不必担心添加和删除该类。

没有隐藏类的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();
});

Answer 2

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

$（ '＃div_id'）切换（）;

因此，不要使用元素选择器来选择您引用的asmselect插件之类的选项标签，只需修改元素选择器以在页面上选择div标签。

Answer 3

如前所述使用.change（），但使用jquery的.show（）和/或.hide（）方法：

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

jQuery从select选项中切换div

3 个答案: