所以这是我第一次尝试 Javascript。我实际上是在尝试根据下拉框中选择的值生成唯一的 DIV。我有它来显示 DIV,但值不会根据选择的内容而改变。这是我到目前为止所得到的:
正如您所看到的,当200,000美元的范围是选择我想要生产已计算的固定值。我很想知道是否有一个 switch 或 case select 语句,我可以根据下拉列表中选择的实际选项以某种方式生成更改 DIV 的语句。任何指向正确方向的指针将不胜感激。
所以这是我第一次尝试 Javascript。我实际上是在尝试根据下拉框中选择的值生成唯一的 DIV。我有它来显示 DIV,但值不会根据选择的内容而改变。这是我到目前为止所得到的:
正如您所看到的,当200,000美元的范围是选择我想要生产已计算的固定值。我很想知道是否有一个 switch 或 case select 语句,我可以根据下拉列表中选择的实际选项以某种方式生成更改 DIV 的语句。任何指向正确方向的指针将不胜感激。
如果您不想使用 jQuery,您可以尝试切换选择并设置 value1、value2、value3 的 innerHTML
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...
}
以下是使用 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>
</p>