Databases
StackOverflow2013
Postsdbo
POjQuery Select -> Hide/Show div on selection
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery Select -> Hide/Show div on selection
    text
    copied!<p>I have a page set up with quite a few different forms...each of these forms has a select field in it. Upon selection of one of the options, I want to display a div. When any of the other options are selected, I want to hide that same div. However, I am having troubles getting it to work.</p> <p>The jQuery:</p> <pre><code>$('select').change(function() { daytimestamp = $('select').attr('id'); val = $('select option:selected').val(); alert(daytimestamp); alert(val); if( val == 'Other Event' ) { // We need to show the description div $('#event_description_' + daytimestamp).show(); } else { // We need to hide the description div $('#event_description_' + daytimestamp).hide(); } }); </code></pre> <p>Some of the HTML:</p> <pre><code>&lt;form name='add_cal_event_1320105600' id='add_cal_event_1320105600' action='' method='POST'&gt; &lt;input type='hidden' name='event_timestamp' value='1320105600' /&gt; Title: &lt;input type='text' name='cc_title' width='100%' /&gt;&lt;br /&gt; Time: &lt;input type='text' name='cc_time' size='8' /&gt; &lt;br /&gt; Event type: &lt;select name='cc_event_type' id='1320105600'&gt; &lt;option value='Wedding'&gt;Wedding &lt;option value='Rehearsal Dinner'&gt;Rehearsal Dinner &lt;option value='Other Event'&gt;Other Event &lt;option value='Event Pending'&gt;Event Pending &lt;/select&gt; &lt;div id='event_description_1320105600' style='display:none;'&gt;Event Title: &lt;input type='text' name='cc_event_type_override' value='' /&gt;&lt;br /&gt;Event Description: &lt;input type='text' name='cc_event_description' value='' /&gt;&lt;/div&gt; Location: &lt;input type='text' name='cc_location' /&gt;&lt;br /&gt; &lt;textarea name='cc_description' class='mceEditor' cols='35'&gt;&lt;/textarea&gt;&lt;br /&gt; &lt;input type='submit' onclick='javascript: jQuery("#add_cal_event_1320105600").submit();' name='submit_form' value='Add Event' /&gt; &lt;/form&gt; </code></pre> <p>Final jQuery (that works):</p> <pre><code>$(document).ready(function(){ $('select').change(function() { daytimestamp = $(this).attr('id'); val = $('#' + daytimestamp + ' option:selected').val(); if( val == 'Other Event' ) { // We need to show the description div $('#event_description_' + daytimestamp).show(); } else { // We need to hide the description div $('#event_description_' + daytimestamp).hide(); } }); }); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload