-1

下面是一些示例代码 - 试图让单选按钮仅在用户从选择框中选择特定选项时显示。请参阅脚本标记中指定要求的两条注释。

<!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 回答