Question

我正在使用一个隐藏下拉菜单的复选框，并在检查时显示另一个。

<dl class='fildLine'>
    <dd>
        <input type='checkbox' name='UnitListNew' id='UnitListNew' value='NewList'>New Unit List
    </dd>
</dl>
<dl class='fildLine mr'>
    <dt>Device :<span class='redTxt'>*</span></dt>
    <dd>
        <select id='device_new' class='dropDown'>
            <option value='' selected='selected'>---Please Select---</option>"+
        </select>
    </dd>
</dl>
<div class='clear'> 
    <dl class='fildLine mr'>
        <dt>Device :<span class='redTxt'>*</span></dt>"+
        <dd> 
            <select id='device' class='dropDown'>
                <option value='' selected='selected'>---Please Select---</option>"+
            </select>
        </dd>
    </dl>
    <div class='clear'>

复选框 UnitListNew 在选中时必须隐藏设备（下拉列表）并显示 device_new 。

$('#UnitListNew').bind('change', function () {
    if ($(this).is(':checked')) {
        checkFlag = 1;
        $('#device').hide();
        $('#device_new').show();
    } 
    else {
        checkFlag = 0;
        $('#device').show();
        $('#device_new').hide();
    } 
});

但这似乎不起作用，因为它显示了Dropdown（正在检查或取消选中）。

Answer 1

工作版：

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
    <dl class='fildLine'>
        <dd>
            <input type='checkbox' name='UnitListNew' id='UnitListNew' value='NewList'>New Unit List
        </dd>
    </dl>
    <dl class='fildLine mr'>
        <dt>Device :<span class='redTxt'>*</span></dt>
        <dd>
            <select id='device_new' class='dropDown'>
                <option value='' selected='selected'>---Please Select---</option>
            </select>
        </dd>
    </dl>
    <div class='clear'> 
    <dl class='fildLine mr'>
        <dt>Device :<span class='redTxt'>*</span></dt>
        <dd> 
            <select id='device' class='dropDown'>
                <option value='' selected='selected'>---Please Select---</option>
            </select>
        </dd>
    </dl>
    <div class='clear'>
    <script>
        $('#UnitListNew').bind('change', function () {
            if ($(this).is(':checked')) {
                checkFlag = 1;
                $('#device').hide();
                $('#device_new').show();
            } 
            else {
                checkFlag = 0;
                $('#device').show();
                $('#device_new').hide();
            } 
        }); 
    </script>
</body>
</html>

没有添加任何内容，只需检查jQuery导入和元素的顺序。

检查是否选中了复选框并显示相应的下拉列表

1 个答案: