jQuery show / hide div from下拉列表更改

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 show / hide div from下拉列表更改

問題描述

2 個解決方案

解決方案1
0 2014-11-25 02:50:05

解決方案2
0 2014-11-25 03:05:38

觀看實際的`JSFIDDLE`

jQuery show / hide div from下拉列表更改

問題描述

2 個解決方案

解決方案1 0 2014-11-25 02:50:05

解決方案2 0 2014-11-25 03:05:38

觀看實際的JSFIDDLE

解決方案1
0 2014-11-25 02:50:05

解決方案2
0 2014-11-25 03:05:38

觀看實際的`JSFIDDLE`