jQueryでラジオボタンのチェックでセレクトボックスを表示・非表示する。

サンプル

[スクリプト部分]

<script src="js/jquery.js" type="text/javascript"></script>
<script>
$(document).ready(function(){

    function displayVals() {
        var singleValues = $("input[name=continent]:checked").val()
        var defined = 0;
        if(singleValues == 2){
            $("#continent_select").css("display","block");
            $("#country_select").css("display","none");
        }else if(singleValues == 3){
            $("#continent_select").css("display","block");
            $("#country_select").css("display","block");
        }else{
            $("#continent_select").css("display","none");
            $("#country_select").css("display","none");
        }
    }

    $('input[name="continent"]:radio').change(displayVals);
    displayVals();

});
</script>

[HEML部分]

<input type="radio" name="continent" value="1" />大陸
<input type="radio" name="continent" value="2" />国
<input type="radio" name="continent" value="3" />都市

<div id="continent_select" style="margin:10px 0 0 0;">
    <select name="continent">
        <option value="0" >大陸を選択してください</option>
        <option value="1" >オセアニア</option>
        <option value="2" >南米</option>
        <option value="3" >北米</option>
        <option value="4" >ユーラシア</option>
    </select>
</div>
<div id="country_select" style="margin:10px 0 0 0;">
    <select name="country">
        <option value="0" >国を選択してください</option>
        <option value="1" >イタリア</option>
        <option value="2" >ブラジル</option>
        <option value="3" >スペイン</option>
        <option value="4" >アルゼンチン</option>
    </select>
</div>