javascript - JQuery 显示/隐藏 div 从下拉列表更改

Question

我有三个组合框，如果进行选择，每个组合框都应显示和隐藏相应的 div。

<script type='text/javascript'>

$(document).ready(function(){
   $ ("select.cascade").on("change", function() {
  var which  = this.id, 
      div    = which + "d", 
      sel    = $(this).val();

  if (sel == '0') {
    $("#" + div).hide();
  } else {
    $("#" + div).show();
  }

  // Call form.submit here if need be
   });
});
</script>

给出了三个带有 div 的下拉列表:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="c1" name="combobox" class="cascade">
    <option value="0">Select one...</option>
    <option id="WallyS" value="WallyS"> Walmart </option>
    <option id="AppliS" value="AppliS">Appliance</option>
    <option id="BBBS" value="BBBS">Beyond Presedential</option>
</select>
   <select id="c2" name="combobox1" class="cascade">
    <option value="0">Select one...</option>
    <option id="WallyS" value="WallyS"> Walmart </option>
    <option id="AppliS" value="AppliS">Appliance</option>
    <option id="BBBS" value="BBBS">Beyond Presedential</option>
</select>
 <select id="c3" name="combobox2" class="cascade">
    <option value="0">Select one...</option>
    <option id="WallyS" value="WallyS"> Walmart </option>
    <option id="AppliS" value="AppliS">Appliance</option>
    <option id="BBBS" value="BBBS">Beyond Presedential</option>
</select>

<div style="display:block">default</div>
<div id="c1d" class="WalLDP" style="display:none">content1 </div>
<div id="c2d" class="AppliDP" style="display:none">content2 </div>
<div id="c3d" class="BBBDP" style="display:none">content3</div>

它正在 http://jsfiddle.net/ 上运行..但是如果我将它保存在记事本中作为 php 或 html 文件并通过 wamp 服务器运行它只显示组合框但不显示 div...请解决这个问题

Answer 1

你必须更正网址

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
or
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

查看操作 JSFIDDLE