只有在选择选项

-1

后才打开div我有一个带有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> 
 
\t  <span class="headline2">{calc:Total} €</span> \t 
 
     <span class="weight">{calc:Susgramos} gramos</span> 
 
\t  <span class="large">Le pagamos a {calc:Porgramo} € el gramo</span> \t 
 
     <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>

股利我可以改变和CSS。另外我可以添加脚本到我的页眉或页脚。

请帮助我，因为我尝试了各种选择，但似乎没有任何工作。

因此，理想情况下，用户从下拉列表中选择一个选项后，显示结果div，在此之前它必须隐藏。我知道一个简单的选项将与一个隐藏的复选框和标签点击，但我需要一个自动的解决方案，它的作品没有在任何按钮提交登录。

这里是链接到我的网页：https://comprooroenmalaga.com/vender-oro-online/

非常感谢，蜂

来源

2017-09-25 Phoebe Lilius

你尝试过这么远吗？只是为你编写代码会很简单，但这不是StackOverflow的大约 –

我试图使用它，但它对我无效。 https://stackoverflow.com/questions/33894337/open-form-based-on-input-from-select 此外，我会用onchange =但因为我不能修改选择和选项代码，我放弃了该选项。 –

您可以使用jQuery来检测下拉改变/选择，然后解雇你的div来显示。此代码假设您的.calculator-item-list div的CSS display属性设置为nonedisplay:none;。

更新：我怀疑OP的html是动态创建的。

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

来源

2017-09-25 12:19:56 ProEvilz

嗨！你的回答看起来很简单，但我无法将jQuery添加到我的WordPress。对不起，我缺乏知识。我正在使用插件将脚本添加到页眉和页脚。我应该如何将这段代码放入该插件中，我自己尝试过并在之间尝试过，但没有任何作用。你可以在https://comprooroenmalaga.com/vender-oro-online/上看到自己。我实际上有.calculator-item-list作为显示：无。非常感谢！！ –

我已检查您的网站。如果没有脚本标记，JS将无法工作。请将它放回脚本标记之间并让我知道，以便我可以再次检查。此外，如果可以，请将代码放在页脚而不是标题中 – ProEvilz

嗨，我已经按照您的指示完成了，它位于脚本标签内部的页脚底部。你可以检查。谢谢！ –

虽然你说，你不能改变的选择和选项，我会假设你的意思是他们的价值观。

它改成这样：

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

来源

2017-09-25 12:31:28 cmprogram

对不起，我的糟糕的解释，我的意思是我不能改变实际的代码，因为它是Ninjaform插件的一部分，我可以更改值，只是我不能添加“onchange “，无论如何感谢您的回答。 –

您可以使用change上选择或使用选择。

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

来源

2017-09-25 12:37:38 bhansa

只有在选择选项

回答

相关问题