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

您是否已连接到互联网？我尝试在jsfiddle上测试它并且它正常工作

因为下面的代码需要互联网连接。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

这是我在笔记本电脑上的代码，只是将其保存为.html文件。我希望这会有所帮助。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>



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



</body>


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

</html>

Answer 2

你必须更正网址

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

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

2 个答案:

见行动 `JSFIDDLE`

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

2 个答案:

见行动 JSFIDDLE

见行动 `JSFIDDLE`