jquery show/hid div基于下拉

我试图根据用户输入从选择下拉框中显示/隐藏各种div。实际上，首先，我试图直接实施jQuery dropdown hide show div based on value中显示的代码，但是我错过了一些简单的东西，它可以防止它在http://www.intertwineimages.com/form2.html的工作，这里是我的完整代码，任何人都可以指出我的方向吗？jquery show/hid div基于下拉

<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>

来源

2012-08-09 Constantino

jQuery的文件，那么它似乎工作。演示http://jsfiddle.net/qzSu6/。顺便说一句，你有没有包含jquery js文件？ – 2012-08-09 13:36:29

没错，它在jsfiddle上工作，但我无法让它在我的服务器上工作（http://www.intertwineimages.com/form2.html），想知道为什么它不会。 – Constantino 2012-08-09 13:37:24

我给你的建议是彻底抛弃jQuery并学习如何使用真正的JavaScript。 – John 2012-08-09 13:38:17