javascript - 显示内容的替代方法

Question

选定的单选按钮将显示其相应的下拉框。

例如，选择单选按钮“安大略”后，将显示一个包含匹配城市的下拉框。

对于上面的示例，我有以下工作代码:

<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> 

我想对选定的元素使用 slideDown() 方法，而不是突然的效果 (display='block')。

所以我更换了:

cityElmntBox.style.display='block';

与:

cityElmntBox.slideDown(500);

但这行不通……请问有人可以帮我让它工作吗？

Answer 1

将其包装在 jQuery 中:

$(cityElmntBox).slideDown(500);

您还可以像这样简化 var 语句，并且不必将其放入包装器中:

var cityElmntBox = $("#dispalyCityBox");