選擇選項后才打開div

Question

我有一個帶有 Ninjaform 計算表格的 Wordpress。 我有一個下拉列表，我想在選擇下拉列表后才顯示計算DIV，但會自動打開。

這是我的選擇輸入（我無法更改）：

<select id="nf-field-5" name="nf-field-5" class="ninja-forms-field nf-element">
<option value="-" selected="selected">Seleccionar kilates</option>
<option value="14k">14k (joyas)</option>
<option value="18k">18k (joyas)</option>
<option value="22k">22k (monedas)</option>
<option value="24k">24k (lingotes)</option>
<option value="no-estoy-seguro-a">No estoy seguro/a</option>
</select>

這是我的 div：

 <span> <div class="calculator-item-list"> <div class="item-block calculator-item"> <p><br> <span class="weight">Total de oro:</span> <span class="headline2">{calc:Total} €</span> <span class="weight">{calc:Susgramos} gramos</span> <span class="large">Le pagamos a {calc:Porgramo} € el gramo</span> <span class="weight">Gastos de valoración: -20€</span> <br> <span class="weight">Precio final:</span> <span class="headline">{calc:Totals} €</span> </p> </div></div> </span>

我可以更改的 div 和 css。 我也可以在我的頁眉或頁腳中添加一個腳本。

請幫助我，因為我嘗試了各種選擇，但似乎都沒有。

所以理想情況下，在用戶從下拉列表中選擇一個選項后，結果 div 顯示出來，在此之前它必須被隱藏。 我知道一個簡單的選擇是使用隱藏的復選框和用於單擊的標簽，但我需要一個自動解決方案，該解決方案無需單擊任何按鈕即可提交。

這是我的頁面鏈接： https : //comprooroenmalaga.com/vender-oro-online/

非常感謝，蜜蜂

Answer 1

您可以使用 jQuery 檢測下拉更改/選擇，然后觸發您的 div 以顯示。 此代碼假定您的.calculator-item-list div 的 CSS display屬性設置為none例如display:none; .

更新：我懷疑 OP 的 html 是動態創建的。

$(document).ready(function() {
  console.log('fired');
  $(window).on('change', '#nf-field-5', function(){
    console.log('Change hit');
    $('.calculator-item-list').show();
  });
});

Answer 2

雖然您說您不能更改 Select 和 Options，但我假設您指的是它們的值。

改成這樣：

  <select id="nf-field-5" name="nf-field-5" class="ninja-forms-field nf-
  element" onchange="showDiv(divToShow)">
  <option value="-" selected="selected">Seleccionar kilates</option>
  <option value="14k">14k (joyas)</option>
  <option value="18k">18k (joyas)</option>
  <option value="22k">22k (monedas)</option>
  <option value="24k">24k (lingotes)</option>
  <option value="no-estoy-seguro-a">No estoy seguro/a</option>
  </select>

還有你的 div：

<span>
 <div class="calculator-item-list" id="divToShow" style="display: none;">
  <div class="item-block calculator-item">
    <p><br>
      <span class="weight">Total de oro:</span>
      <span class="headline2">{calc:Total} €</span> 
      <span class="weight">{calc:Susgramos} gramos</span>
      <span class="large">Le pagamos a {calc:Porgramo} € el gramo</span>    
      <span class="weight">Gastos de valoración: -20€</span>
      <br>
      <span class="weight">Precio final:</span>
      <span class="headline">{calc:Totals} €</span>
    </p>
 </div></div>
</span>

然后 ：

 <script>
 function showDiv(id){    

  //For ease
  var x = document.getElementById(id);
  x.style.display = "block";
  }
  <script>

Answer 3

您可以使用 select 上的change或使用 selected。

 $(document).ready(function() { $("#dropdown").change(function() { $("#show").show(); }) })

 #show { display: none; margin-top: 40px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <select name="" id="dropdown"> <option value="test1">TEST1</option> <option value="test2">TEST2</option> <option value="test3">TEST3</option> <option value="test4">TEST4</option> <option value="test5">TEST5</option> </select> <div id="show"> TEST SHOW </div>