Question

这可能与我正在使用的是一个表行没有任何关系，但这是我的问题：我有一个选择菜单。选择时，其中一些选项应隐藏表单中的表格行。其他人将显示相同的表格行。使用我当前的脚本，TR不会受到任何影响，但是，我知道它对点击或选择的响应是因为我在控制台中记录了该事件。另一个问题是控制台在选择菜单中的任何内容时记录（即箭头）。我只希望在实际选择一个选项时显示/隐藏tr。我希望我对此很清楚。

我的jQuery：

$('[rel="toggleElement"]').ready(function(){

        $(this).on('click', function(){

            var elem = $(this).data('elem-id');
            elem = $('.'+elem);

            if($(this).data('elem-status') == 'show'){

                elem.show();

            }
            if($(this).data('elem-status') == 'hide'){

                elem.hide();

            }

            console.log('An element was toggled!');         

    });

});

这是我的HTML源代码：

<table align="center" width="100%" cellspacing="1" cellpadding="5" border="0">
                    <tr>
                        <td align="center" colspan="2" class="row1"><h1>Article Info</h1></td>
                    </tr><tr>
                        <td align="right" width="30%" class="row2"><label>Article Title</label></td>
                        <td align="left" width="70%" class="row2"><input type="text" name="title" size="30" class="text-input" value="Max: The Curse of Brotherhood Review"></td>
                    </tr><tr>
                        <td align="right" width="30%" class="row2"><label>Category</label></td>
                        <td align="left" width="70%" class="row2"><select name="category_id">
                              <option value="1" rel="toggleElement" data-elem-id="platforms" data-elem-status="hide">Base Command News</option>
                              <option value="4" rel="toggleElement" data-elem-id="platforms" data-elem-status="show">Gaming Articles</option>
                              <option value="8" rel="toggleElement" data-elem-id="platforms" data-elem-status="hide">Resources</option>
<option value="2" rel="toggleElement" data-elem-id="platforms" data-elem-status="hide">Staff Intel</option>
                             <option value="7" rel="toggleElement" data-elem-id="platforms" data-elem-status="hide">Tutorials</option>
                             <option value="10" rel="toggleElement" data-elem-id="platforms" data-elem-status="hide">---Clan Websites</option>
                             <option value="9" rel="toggleElement" data-elem-id="platforms" data-elem-status="hide">---Game Servers</option>
</select></td>
                    </tr><tr class="platforms">
                        <td align="right" width="30%" class="row2"><label>Platform(s)</label></td>
                        <td align="left" width="70%" class="row2">Nintendo <input type="checkbox" name="platforms[]" value="3"  />&nbsp;&nbsp;&nbsp;PC <input type="checkbox" name="platforms[]" value="4"  />&nbsp;&nbsp;&nbsp;PlayStation <input type="checkbox" name="platforms[]" value="2"  />&nbsp;&nbsp;&nbsp;Xbox <input type="checkbox" name="platforms[]" value="1"  />&nbsp;&nbsp;&nbsp;</td>
                    </tr>

PS：我不想使用toggle（）因为只显示特定选项而其他选项只隐藏。

TIA！

Answer 1

对select标签使用jQuery change（）并获取所选选项的自定义属性（data-element-id，data-element-status）。

$(document).ready(function(){
    if($('option:selected', 'select[name="category_id"]').data('elem-status') == 'hide') {
     $('.platforms').hide();
    }
    $('select[name="category_id"]').change(function(){
            var elem = $('option:selected', this).data('elem-id');
            var status = $('option:selected', this).data('elem-status');
            var class_target = $('.'+elem);
            if(status == 'show'){
                class_target.show();
            }
            if(status == 'hide'){
                class_target.hide();
            }
            console.log('An element was toggled!');         
    });

});

jsfiddle

Answer 2

这可以使用“更改”事件

来完成

$(document).ready(function () {
    $('.platforms').hide();
    $(document).on('change', 'select[name="category_id"]', function () {
        var $selectedOption = $(this).find("option:selected");
        var elem = $selectedOption.data('elem-id');
        elem = $('.' + elem);

        if ($selectedOption.data('elem-status') == 'show') {
            elem.show();
        }
        if ($selectedOption.data('elem-status') == 'hide') {
            elem.hide();
        }

        console.log('An element was toggled!');
    });
});

jsfiddle demo

如何使用jQuery显示或隐藏tr？

2 个答案: