从选择选项jQuery切换div

我需要从下拉选择选项框切换div。我希望它类似于asmselect为jquery，而不是列出选项标签，我希望它显示一个隐藏的div。有没有这样的事情？或者有人知道如何设置它？谢谢，杰夫。从选择选项jQuery切换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>

来源

2010-05-04 Jeffrey

你可能是一个小米矿石具体与您的要求？我不确定我在追踪你所要求的。 – gurun8 2010-05-04 17:02:43

我已更新帖子。 – Jeffrey 2010-05-04 17:33:54

你是否在寻找类似的东西？ 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()，这需要一个回调slideUp()后添加hidden类之前显示的兄弟姐妹完成

这里还有一个（在我意见，更好）的方式：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(); 
});

来源

2010-05-14 12:12:51 user113716

这起作用。古拉爵！ – Jeffrey 2010-05-18 18:16:11

我现在正在寻找添加到这使它像asmselect插件，以便它将显示多个div并在选择器上禁用它们。有任何想法吗？ – Jeffrey 2010-05-18 23:43:53

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

$（'＃div_id'）。toggle（）;

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

来源

2010-05-04 17:04:46 Jeremy

谢谢杰里米。我似乎无法得到它的工作，你可以看看我的代码上面。 – Jeffrey 2010-05-04 17:34:49

实际上，这段代码看起来不错，我能够使它工作。你看到什么错误？我唯一的建议是将你定义的字符串改为字符串而不是元素对象。例如： var theDiv =“.is”+ value; 这样，你会打电话给$（theDiv），就像我会这样做。但正如我所说，你的方式对我来说工作得很好。发布错误和您使用的浏览器，也许我可以提供不同的建议。 – Jeremy 2010-05-04 18:13:33

它适用于我的mozilla，但不适用于webkit。 – Jeffrey 2010-05-04 18:24:38

使用.change（），但与jQuery的.show（）和/或.hide（）方法：

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

来源

2017-06-17 10:45:38 TomoMiha

从选择选项jQuery切换div

回答

相关问题