자바 스크립트 드롭 다운으로 케이스 선택

Question

자바 스크립트를 처음 시도했습니다. 나는 본질적으로 드롭 다운 상자에서 선택한 값을 기반으로 고유 한 DIV를 생성하려고합니다. DIV를 보여주기 위해 가지고 있지만 값은 선택된 것에 따라 바뀌지 않습니다. 여기에 지금까지있어 무엇 다음 $ 20 만 범위 내가 고정 된 값의 이미 계산 한 것을 생산하려면 선택입니다

jsfiddle

당신이 볼 수 있듯이,. 드롭 다운에서 선택한 실제 옵션을 기반으로 DIV를 어떻게 든 변경시킬 수있는 스위치 또는 사례 선택 문이 있는지 궁금합니다. 올바른 방향으로 어떤 포인터가 크게 감사하겠습니다.

Answer 1

, 당신은 선택을 전환하고 값 1의 innerHTML 설정을 시도 할 수 1, 값 2, value3

switch(document.getElementById('mySelect').value) 
{ 
    case '0': 
     document.getElementById('value1').innerHTML ='Principal and Interest only: $898'; 
     document.getElementById('value2').innerHTML = 'Estimated total monthly payment: $1,098'; 
     document.getElementById('value3').innerHTML ='VA loan payment:';  
     break; 
    case '1': 
     document.getElementById('value1').innerHTML ='Principal and Interest only: $998'; 
     document.getElementById('value2').innerHTML = 'Estimated total monthly payment: $2,098'; 
     document.getElementById('value3').innerHTML ='VA loan payment: $25';  
     break;   
    etc... 
} 

Answer 2

여기이 사용 jQuery를 할 수있는 방법은 다음과 같습니다 당신이 jQuery를 사용하지 않으려면

<select id="mySelect" onchange="showhide(this)"> 
    <option value="">Desired Home Price:</option> 
    <!-- the option values are suffixes for the elements to show --> 
    <option value="0">$200,000</option> 
    <option value="1">$175,000</option> 
    <option value="2">$150,000</option> 
    <option value="3">$125,000</option> 
    <option value="4">$100,000</option> 
    <option value="5">$75,000</option> 
    <option value="6">$50,000</option> 
</select> 

<div class="answer0 answers" style="width:200px;height:200px;display:none"> 
<div id="value1">Principal and Interest only: $898</div> 
<div id="value2">Estimated total monthly payment: $1,098</div> 
<div id="value3">VA loan payment:</div> 
<div id="value4">Another field:</div> 
</div> 

<div class="answer1 answers" style="width:200px;height:200px;display:none"> 
<div id="value1a">Principal and Interest only: $898.00</div> 
<div id="value2a">Estimated total monthly payment: $1,098.00</div> 
<div id="value3a">VA loan payment:</div> 
<div id="value4a">Another field:</div> 
</div> 



<script type="text/javascript"> 

function showhide(id) { 
    var mySel = $(id).val() 
    $('.answers').hide() 
    $('.answer'+mySel).show() 
} 

</script>