0

選択ドロップダウンボックスからのユーザー入力に基づいて、さまざまな 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>
4

1 に答える 1

2

http://www.intertwineimages.com/form2.htmlの jquery ファイルが含まれていないためです。

于 2012-08-09T13:39:04.243 に答える