jquery 根据下拉菜单显示/隐藏 div答案

【问题标题】：jquery show/hid div based on drop downjquery 根据下拉菜单显示/隐藏 div
【发布时间】：2012-08-06 17:57:38
【问题描述】：

我正在尝试根据来自选择下拉框中的用户输入来显示/隐藏各种 div。实际上，首先，我正在尝试直接实现jQuery dropdown hide show div based on value 中显示的代码，但是我缺少一些简单的东西，阻止它在http://www.intertwineimages.com/form2.html 工作这是我的完整代码，任何人都可以指出我的权利方向？

<html>

<script type="text/javascript">
hideAllDivs = function () {
    $("#hourly").hide();
    $("#per_diem").hide();
    $("#fixed").hide();
};

handleNewSelection = function () {

    hideAllDivs();

    switch ($(this).val()) {
        case '1':
            $("#hourly").show();
        break;
        case '2':
            $("#per_diem").show();
        break;
        case '3':
            $("#fixed").show();
        break;
    }
};

$(document).ready(function() {

    $("#project_billing_code_id").change(handleNewSelection);

    // Run the event handler once now to ensure everything is as it should be
    handleNewSelection.apply($("#project_billing_code_id"));

});
</script>
<select id="project_billing_code_id">
    <option value="">Pick one</option>
    <option value="1">1-Hourly</option>
    <option value="2">2-Per Diem</option>
    <option value="3">3-Fixed</option>
</select>

<div id="hourly">Hourly</div>
<div id="per_diem">Per Diem</div>
<div id="fixed">Fixed</div>

</html>

编辑：更正代码

<html>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
hideAllDivs = function () {
    $("#hourly").hide();
    $("#per_diem").hide();
    $("#fixed").hide();
};

handleNewSelection = function () {

    hideAllDivs();

    switch ($(this).val()) {
        case '1':
            $("#hourly").show();
        break;
        case '2':
            $("#per_diem").show();
        break;
        case '3':
            $("#fixed").show();
        break;
    }
};

$(document).ready(function() {

    $("#project_billing_code_id").change(handleNewSelection);

    // Run the event handler once now to ensure everything is as it should be
    handleNewSelection.apply($("#project_billing_code_id"));

});
</script>
<select id="project_billing_code_id">
    <option value="">Pick one</option>
    <option value="1">1-Hourly</option>
    <option value="2">2-Per Diem</option>
    <option value="3">3-Fixed</option>
</select>

<div id="hourly">Hourly</div>
<div id="per_diem">Per Diem</div>
<div id="fixed">Fixed</div>

</html>

【问题讨论】：

嗯，它似乎工作。在jsfiddle.net/qzSu6 进行演示。顺便说一句，您是否包含了 jquery js 文件？
对，它可以在 jsfiddle 上运行，但我无法让它在我的服务器上运行 (intertwineimages.com/form2.html)，想知道为什么它不会。
我对你的建议是完全抛弃 jQuery 并学习如何使用真正的 JavaScript。
包括 jquery。它没有设置
您缺少对 jquery 的引用。

标签： jquery html show-hide

【解决方案1】：

这是因为您没有包含 http://www.intertwineimages.com/form2.html 的 jquery 文件

【讨论】：

啊！这就是我所缺少的简单事情。你能告诉我具体如何做到这一点或阐明这个问题吗？
它非常简单。我的firefox上安装了firebug。当我打开网址时，我在萤火虫中遇到错误，说$ is not defined。
非常感谢，知道了！原始帖子已被修改，以便为感兴趣的人显示正确的答案。