案例Select for Javascript Dropdown

所以這是我第一次嘗試使用Javascript。我基本上試圖根據在下拉框中選擇的值來生成獨特的DIV。我已經明白了DIV的值，但是這些值不會根據選擇的內容而改變。下面是我到目前爲止有：案例Select for Javascript Dropdown

jsfiddle

正如你可以看到，當$ 200,000個範圍是選擇我要產生固定值的，我已經計算。我很好奇，看看是否有切換或案例選擇語句，我可以根據下拉列表中選擇的實際選項以某種方式產生更改DIV的內容。任何正確的方向指針將不勝感激。

來源

2012-10-03 smada

你應該考慮使用jQuery。您也可以通過使用類名而不是單個ID來在幾行代碼中完成此操作。 –

我不知道如何去使用jQuery – smada

我已經發布了一個例子。 –

如果你不想使用jQuery，你可以嘗試切換選擇和設定值1的innerHTML，值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... 
}

來源

2012-10-03 20:54:08

不錯。這正是我尋找斯圖爾特的原因。我知道有一種方法可以讓它切換，但我沒有意識到你必須用開關封裝整個getelementbyid。我感謝你的時間和耐心。 – smada

這裏是你如何能做到這一點使用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>

來源

2012-10-03 20:39:01

非常感謝！這絕對在jsfiddle中很棒。還有一個簡單的問題，我如何爲頁面調用jQuery？ – smada

您需要將它包含在HEAD中： –

In jsfiddle你可以選擇左側菜單中的jQuery。 –

案例Select for Javascript Dropdown

回答

相關問題