我有一些设置为display:none;
的div,应该显示select
菜单的onchange()
。这是有问题的 html:
<p>
<label for="newsletter">Package</label>
<select id="package" name="package" onchange="formupdate();">
<option value="individual">Individual</option>
<option value="couple">Couple</option>
<option value="family">Family</option>
</select>
</p>
<div id="famnumdiv" style="display:none;">
<p>
<label for="famnum">How Many Members?</label>
<input type="text" id="famnum" name="famnum"/>
</p>
</div>
然后是onChange()
函数:
function formupdate() {
var selectedPackage = document.getElementById("package").value;
if ( selectedPackage == 'family' ) {
document.getElementByID('famnumdiv').style.display = "block";
}
}
当我从select
中选择Family
时,没有任何反应。有什么想法吗?
编辑:更改为if ( selectedPackage == 'family' ) {
,它仍然没有显示该div
您正在分配给selectedPackage
两次。
第三行应为:
if ( selectedPackage == 'family' ) {
您的第二个getElementByID
不正确,请尝试此getElementById
JavaScript 区分大小写
使用它,它使平等性更好
if ( selectedPackage === 'family' )
尝试将代码更改为
function formupdate() {
var selectedPackage = document.getElementById("package").value;
if ( selectedPackage == 'family' ) {
document.getElementByID('famnumdiv').style.display = "block";
}
}
如果在 if 语句中使用 selectedPackage = 'family',则 selectedPackage 的值将设置为带有两个"="的 'family',if 语句将执行匹配
您正在将family
分配给selectedPackage
而不是比较。
此外,您没有正确选择所选选项。
var selectedPackage = document.getElementById("package");
selectedPackage = selectedPackage.options[selectedPackage.selectedIndex].value;
而且你也不应该使用内联js,添加一个eventListener。
var package = document.getElementById("package");
package.addEventListener("change",formupdate,false);