CODEWITHSUNDEEP
jqueryhideshowtr
ShoeLace1291
ShoeLace1291

Reputation: 4698

How to show or hide tr with jQuery?

This may have nothing to do with the fact that what I am working with is a table row, but this is my problem: I have a select menu. Some of those options should, when selected, hide a table row in my form. Others will show the same table row. With my current script, the TR is not affected in any way, however, I know it's reacting to the on click or on select because I log that event in console. The other problem is that console logs when anything in the menu is selected(ie the arrow). I only want the tr to be shown/hidden when an option is actually selected. I hope I'm being clear enough on this.

My 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!');         

    });

});

Here is my HTML source:

<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: I do not want to use toggle() because specific options only show and others only hide.

TIA!

Upvotes: 0

Views: 1380

Answers (2)

rails_id
rails_id

Reputation: 8220

Use jQuery change() for select tag and get custom attributes (data-element-id, data-element-status) of selected option.

$(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

Upvotes: 1

icaru12
icaru12

Reputation: 1582

This could be done using "change" event

$(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

Upvotes: 0

Related Questions