オプションを選択してからdivを開く

Question

WordpressにはNinjaform計算フォームがあります。私はドロップダウンリストを持っており、ドロップダウンが選択された後で計算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>

divの私が変更とCSSできます。また、私は私のヘッダーまたはフッターにスクリプトを追加することができます。

私はさまざまなオプションを試してみましたが、役に立たないようです。

ユーザがドロップダウンからオプションを選択した後、理想的には結果divが表示され、その前に非表示にする必要があります。 クリックすると隠されたチェックボックスとラベルが付いた簡単なオプションがわかりますが、自動解決が必要です。これは提出するボタンをクリックすることなく動作します。 https://comprooroenmalaga.com/vender-oro-online/

多くのおかげで、 ビー

Answer 1

あなたは、ドロップダウン・変更/選択を検出し、表示するために、あなたのdivを発射するためにjQueryを使用することができます。ここでは

は私のページへのリンクです。このコードでは、.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

選択または使用選択した上で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>