2013-01-02 44 views
0

所选的单选按钮将显示其对应的下拉框。显示内容的替代方法

例如,在选定的单选按钮“安大略省”上,将出现一个包含匹配城市的下拉框。

我有上述示例下列工作的代码:

<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#searchForm input:radio").change(function() { 

     var buttonPressed = $('[name="Region"]:radio:checked').val(); 
     var cityElmntBox = document.getElementById("dispalyCityBox"); 

     if(buttonPressed == 'Ontario'){ 
      cityElmntBox.style.display='block'; 
     } else { 
      cityElmntBox.style.display='none'; 
     } 

    }); 
}); 
</script> 

代替突然效果(display='block'),我想使用所选元素slideDown()方法。

所以我代替:

cityElmntBox.style.display='block'; 

有:

cityElmntBox.slideDown(500); 

但是,这并不工作...,请有人可以帮助我得到它的工作?

+0

'dispalyCityBox' - >确定你没有打字错误吗?无论如何,在处理DOM时不要混合使用jQuery和原始js,使用'$()'选择器! – moonwave99

回答

1

改为尝试$('#dispalyCityBox').slideDown(500)

通过使用cityElmntBox.slideDown(500);您试图在非jQuery对象上使用jQuery方法。

+1

工作!非常感谢您的帮助,快速响应和专业性。 – blsn

+0

不客气。乐意效劳。 – j08691

2

把它包在jQuery的:

$(cityElmntBox).slideDown(500); 

还可以简化var语句这样,你不会有把它放在一个包装:

var cityElmntBox = $("#dispalyCityBox"); 
2

使用$('#dispalyCityBox'),而不是document.getElementById("dispalyCityBox")