基本 javascript 不起作用 - 显示块答案

【问题标题】：Basic javascript isn't working - display block基本 javascript 不起作用 - 显示块
【发布时间】：2013-08-28 13:02:09
【问题描述】：

如果用户选择“房屋”，我希望弹出一个新的选择选项框。目前什么都没有发生。

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>

【问题讨论】：

你确定吗？它在我的浏览器中工作。你使用脚本标签了吗？
使用if(expression) statement; else statement2; 而不是if(expression) statement; if(!expression) statement2;
jsbin.com/AsoMaSO 您的代码正在运行。
@Mike，我检查了你的代码，对我来说它工作正常，当用户选择房子时，家庭下拉显示完美吗？或者你想做点别的事？
@Phil 他们从那时起就这样做了，但我真的不建议以这种方式使用它。我只是将他的代码复制到一个 jsbin 中，看看它是否有效。我要么使用document.getElementById，要么使用jQuery。

标签： javascript html css input

【解决方案1】：

showFamilies 函数中的pt 可能未定义（取决于浏览器对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)">

附： <select> 元素没有 value 属性。

【讨论】：

【解决方案2】：

重新定义您的 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>

【讨论】：

重新定义了什么loop？
它不起作用，您接受了答案吗？也许你应该向我们展示完整的代码
@Raubi，OP 没有将 JS 包含在 script 标签中。那是真正的问题。阅读 cmets。
@Mike 为什么你接受这个作为答案，因为你只评论它不起作用，接受正确的答案以便用户可以获得适当的答案。我认为 phil ans 是最合适的
@ShankarDamodaran 这似乎根本不是问题。 cmets 建议 OP 在其<script> 标签中使用了不正确的src 属性

【解决方案3】：

你必须通过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';
}

【讨论】：

我认为在你的情况下 pt 是未定义的？