Question

如果用户选择“House”，我想要弹出一个新的选择选项框。目前没有任何事情发生。

function showFamilies(){

if(pt.selectedIndex == 1)
document.getElementById('families').style.display = 'block';

if(pt.selectedIndex != 1)
document.getElementById('families').style.display = 'none';
}


<select id="pt" value="pt" name="pt" onChange="showFamilies()">
<option value="" name="">Select</option>
<option value="1" name="1">House</option>
<option value="2" name="2">Commercial</option>
</select>

<div id="families" style="display:none">Families: 
<select name="amin_families">
<option value="1" name="Condo">1</option>
<option value="2" name="Co-Op">2</option></select>
</div>

Answer 1

pt函数中的

showFamilies可能未定义（取决于浏览器对http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#named-access-on-the-window-object的解释）。尝试

function showFamilies(pt) {
    document.getElementById('families').style.display = pt.selectedIndex === 1
        ? 'block' : 'none';
}

并在您的HTML中

<select id="pt" name="pt" onchange="showFamilies(this)">

P.S。 <select>元素没有value属性。

Answer 2

你必须通过this

<select id="pt" value="pt" name="pt" onChange="showFamilies(this)">

你的剧本：

function showFamilies(pt){

if(pt.selectedIndex == 1)
document.getElementById('families').style.display = 'block';

if(pt.selectedIndex != 1)
document.getElementById('families').style.display = 'none';
}

Answer 3

重新定义了您的if声明。现在工作正常。

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
    function showFamilies(pt){

    if(pt.selectedIndex == 1)
    {
    document.getElementById('families').style.display = 'block';
    }
    else
    {
    document.getElementById('families').style.display = 'none';
    }
    }
    </script>
    <title></title>
</head>
<body>



<select id="pt" value="pt" name="pt" onChange="showFamilies(this)">
    <option value="" name="">Select</option>
    <option value="1" name="1">House</option>
    <option value="2" name="2">Commercial</option>
</select>

<div id="families" style="display:none">Families:
    <select name="amin_families">
        <option value="1" name="Condo">1</option>
        <option value="2" name="Co-Op">2</option></select>
</div>
</body>
</html>

基本的javascript无效 - 显示块

3 个答案: