옵션을 선택한 후에 만 ​​div를 엽니 다.

Question

저는 Wordpress에 Ninjaform 계산 양식이 있습니다. 드롭 다운 목록이 있고 드롭 다운을 선택한 후에 만 ​​계산 DIV를 표시하려고하지만 자동으로 열립니다.

이 내 선택 입력 (I 변경할 수없는)입니다 :

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

이 내 사업부입니다 :

<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

드롭 다운 변경/선택을 감지하고 표시하도록 사업부를 해고 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> 

그리고 당신의 사업부 : 다음

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