jquery show/hid div based on drop down

我正在尝试根据用户输入从选择下拉框中显示/隐藏各种div。实际上，首先，我正在尝试直接实现jQuery下拉列表中显示的代码隐藏显示div 基于值，但是我缺少一些简单的东西，阻止它工作 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>

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

相关内容

最新更新

热门标签：