javascript - 想要根据下拉框选择显示/隐藏div

标签 javascript jquery html input

只有在下拉框中选择了“商业用途”时,我才希望 jQuery 显示 div id='商业'。

这是我的代码:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$('#purpose').on('change', function() {
  if ( this.value == '1');
  {
    $("#business").show();
  }
  else
  {
    $("#business").hide();
  }
});
});
</script>
<body>
<select id='purpose'>
<option value="0">Personal use</option>
<option value="1">Business use</option>
<option value="2">Passing on to a client</option>
</select>
<div style='display:none;' id='business'>Business Name<br/>&nbsp;
<br/>&nbsp;
    <input type='text' class='text' name='business' value size='20' />
    <br/>
</div>
</body>

和 JSFiddle:http://jsfiddle.net/2kGzZ/1/

最佳答案

将代码包装在 $(document).ready(function(){................}); handler 中,同时删除 ;if

之后的
$(document).ready(function(){
    $('#purpose').on('change', function() {
      if ( this.value == '1')
      //.....................^.......
      {
        $("#business").show();
      }
      else
      {
        $("#business").hide();
      }
    });
});

Fiddle Demo

关于javascript - 想要根据下拉框选择显示/隐藏div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21584752/

相关文章:

javascript - Jquery 鼠标悬停回调不起作用

javascript - PhantomJS 时间轴屏幕截图重复相同的图像

javascript - 在 angular.js 中缓存数据的常用方法是什么

图像的 jQuery 缓动不起作用

javascript - Chrome SecurityError 从本地文件系统加载 jQuery Mobile 页面

html - yii2 事件形式中的 Bootstrap 3 复选框 css 样式

javascript - 交换两个 div(或与此相关的任何对象)的堆叠顺序

html - 带插入符号的 CSS 下拉菜单

javascript - 根据设备动态更改文本框大小

javascript - 在正则表达式中允许方向键