-1

以下にサンプル コードを示します。ユーザーが選択ボックスから特定のオプションを選択した場合にのみ、ラジオ ボタンを表示しようとしています。要件を指定する script タグ内の 2 つのコメントを参照してください。

<!DOCTYPE HTML>
<html>
<head>
    <style>
    ul {list-style-type: none;}
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript">
        //what jQuery code is needed here so that the following occurs?
        //1. the label for the radio buttons and the radio buttons themselves only appears when the user picks Formula Type 3 from the select box
        //2. when the radio buttons and label are not displayed, the space they were in remains but it just looks empty (the word "placeholder", in the third li tag, does NOT move up underneath the select box)
    </script>
</head> 
<body>
    <ul>
        <li>
            <label for="FormulaType">Formula Type</label>
            <select name="FormulaType" id="FormulaType">
                <option value=""></option>
                <option value="Type1">Type1</option>
                <option value="Type2">Type2</option>
                <option value="Type3">Type3</option>
                <option value="Type4">Type4</option>
            </select>
        </li>
        <li>
            <label for="OutputFat">Output Fat Is</label>
            <input type="radio" name="OutputFat" value="low">lowest
            <input type="radio" name="OutputFat" value="high">highest       
            </radio>
        </li>
        <li>
            placeholder
        </li>
    </ul>
</body>
</html>
4

1 に答える 1

0

試す

jQuery(function(){
    $('#FormulaType').change(function(){
        var $this = $(this);
        $this.closest('li').next().css('visibility', $this.val() == 'Type3'? 'visible' : 'hidden')
        //if don't want to preserve the space
        //$this.closest('li').next().toggle($(this).val() == 'Type3')
    }).triggerHandler('change')
})

デモ:フィドル

于 2013-08-30T00:19:14.543 に答える