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

您可以使用"Y0 40 98 86 A".sub(/^0/,'O').sub(/(?<=^.)0/,'O') => "YO 40 98 86 A"选择或使用选定的。

＆＃13;

change

＆＃13;

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

＆＃13;

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

＆＃13;

选择选项后才打开div

3 个答案: