我正在尝试创建一个包含值的选择标记,如果选择了五个值中的两个,则另一个选择框将显示在屏幕上。我已经尝试搜索这个并找到人们使用javascript和使用onchange事件的地方但由于某种原因我无法让它工作。如果不选择个人或短期,我想要显示的切换ID是我希望隐藏的。代码如下,并提前感谢您的帮助。我没有包含javascript,因为我删除了所有内容,但我尝试了几种不同的方式,没有运气。我认为这是我的表格形式。
HTML
<tr>
<td class='txt'><span>*</span>Coverage Needed?</td>
<td>
<select name="ins_type" id='ins_options' onChange="toggle();">
<option>Select...</option>
<option value="Group">Group Insurance</option>
<option value="Individual">Individual Insurance</option>
<option value="Short Term">Short Term Insurance</option>
<option value="Medicare">Medicare</option>
<option value="Life">Life Insurance</option>
</select>
</td>
<td ><div id='toggle'><span>*</span>How Many?
<select name='applicants' id='applicants' >
<option>Select...</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='1'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
</select>
</div>
</td>
</tr>
Javascript(我认为这样的事情应该有效)
<script type="text/javascript">
function toggle() {
if (document.getElementById("ins_options").options
[getElementById("ins_options").selectedIndex].value == "Individual") {
document.getElementById("toggle").style.display = "none";
} else {
document.getElementById("toggle").style.display = "block";
}
}
</script>
答案 0 :(得分:1)
您在所选索引查找中遗漏了document
- http://jsfiddle.net/VfEyW/
所以而不是
[getElementById("ins_options").selectedIndex]
尝试
[document.getElementById("ins_options").selectedIndex]
...
<强>更新强>
要检查2个值,您可以执行此操作
function toggle() {
var val = document.getElementById("ins_options").options[document.getElementById("ins_options").selectedIndex].value;
if ( val == "Individual" || val == "Short Term" ) {
document.getElementById("toggle").style.display = "none";
} else {
document.getElementById("toggle").style.display = "block";
}
}