CODEWITHSUNDEEP
jquery
Andrew Charlton
Andrew Charlton

Reputation: 251

Using jquery to hide and show tables with option values

I've been using this bit of jquery code on my website:

jQuery(document).ready(function() {
   $('#tablets').change(function() {
    $('#LeapPad 2 Explorer,#VTech InnoTab 2').hide();
    $('#' + $(this).val()).show();
});

});

But it doesn't seem to be working?

My website link is: http://mykidstablet.co.uk

Upvotes: 0

Views: 178

Answers (4)

Dave G
Dave G

Reputation: 9777

You're dealing with jQuery in a "noconflict" style, as such your '$' is not defined in there, change your function to read:

jQuery(document).ready(function($) {
   $('#tablets').change(function() {
       $('#LeapPad 2 Explorer,#VTech InnoTab 2').hide();
       $('#' + $(this).val()).show();
  })
});

the ready function will be passed the jQuery instance in use.

NOTE removed previously added comments with regard to IDs. See other answers for specifics.

Upvotes: 3

VIDesignz
VIDesignz

Reputation: 4783

Eliminate the spaces in the Select "Value" and the Table Id's , Also, Instead of hiding by ID, hide the class attached to the item tables

JQuery

jQuery(document).ready(function() {
    $('#tablets').change(function() {
        $('.stock-list').hide(); // Hide all Item Tables
        $('#' + $(this).val()).show();
    });
});

Select Html

<select id="tablets">
<option value="LeapPad2Explorer">LeapPad 2 Explorer</option>
<option value="LeapPadExplorer">LeapPad Explorer</option>
<option value="VTechInnoTab2">VTech InnoTab 2</option>
<option value="HelloKitty7inchTablet">Hello Kitty 7 inch Tablet</option>
<option value="KurioKidsTabletwithAndroid4.0">Kurio Kids Tablet with Android 4.0</option>
<option value="Tabeo7inchKidsTablet">Tabeo 7 inch Kids Tablet</option>
</select>

Table Html

<table class="stock-list tablesorter" id="LeapPad2Explorer" border="0" cellpadding="0" cellspacing="0" width="100%">
///Table Content
</table>

<table class="stock-list tablesorter" id="VTechInnoTab2" border="0" cellpadding="0" cellspacing="0" width="100%">
///Table Content
</table>

Upvotes: 0

Akhil
Akhil

Reputation: 1083

Don't use spaces, the reason for this is simple, space character is not a valid for ID attribute.

ID tokens must begin with a letter ([A-Za-z]) and may be followed by any number of   letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

Upvotes: 1

Idiot211
Idiot211

Reputation: 848

Seems that this.$ comes back as undefined on your website. I'm not sure why, try replacing $ with jQuery like you did at the top so...

jQuery(document).ready(function() {
jQuery('#tablets').change(function() {
jQuery('#LeapPad 2 Explorer,#VTech InnoTab 2').hide();
jQuery('#' + jQuery(this).val()).show();
});

});

Upvotes: 0

Related Questions