问题描述
我正在尝试创建一个包含值的选择标记,如果选择了五个值中的两个,另一个选择框将显示在屏幕上.我试过搜索这个,发现人们在哪里使用 javascript 并使用 onchange 事件,但由于某种原因我无法让它工作.如果选择了个人或短期,如果不想将其隐藏,则切换 ID 是我想要显示的 ID.代码如下,提前感谢您的帮助.我没有包含 javascript,因为我把它全部删除了,但我尝试了几种不同的方法,但没有成功.我认为这是我布置表格的方式.
HTML
<td class='txt'><span>*</span>需要覆盖吗?</td><td><select name="ins_type" id='ins_options' onChange="toggle();"><option>选择...</option><option value="Group">团体保险</option><option value="Individual">Individual Insurance</option><option value="Short Term">短期保险</option><option value="Medicare">Medicare</option><option value="Life">人寿保险</option></选择></td><td ><div id='toggle'><span>*</span>多少?<选择名称='申请人' id='申请人' ><option>选择...</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></选择></td></tr>
Javascript(我认为这样的东西应该可以工作)
解决方案 您在选择的索引查找中缺少 document
- http://jsfiddle.net/VfEyW/
所以代替
[getElementById("ins_options").selectedIndex]
试试
[document.getElementById("ins_options").selectedIndex]
...
更新
要检查 2 个值,您可以这样做
函数切换() {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";} 别的 {document.getElementById("toggle").style.display = "block";}}
I am trying to create a select tag that holds values in it and if two out of the five values are selected another select box will show on the screen. I have tried searching for this and found where people are using javascript and using the onchange event but for some reason I cannot get it to work. The toggle id is the one I want to show up if individual or short term is selected if not I want it to be hidden. The code is below and thanks for your help in advance. I didn't include the javascript because I deleted it all but I have tried it a few different ways with no luck. I am thinking it is the way I have the form laid out.
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 (I was thinking something like this should work)
<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>
解决方案 You're missing document
in your selected index lookup - http://jsfiddle.net/VfEyW/
So instead of
[getElementById("ins_options").selectedIndex]
try
[document.getElementById("ins_options").selectedIndex]
...
UPDATE
To check against 2 values you can do this
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";
}
}
这篇关于Javascript 选择的索引 onchange 根本不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!
08-21 00:16