title: Javascript for select option not working in Chrome browser
body: <p>The following code works in Internet Explorer and Firefox but not in Chrome.  Does anyone have an idea what modification is needed? </p>
  
  <pre><code>//* From the javascript file    
  function hide_show(vals){
          if(vals=="food"){
              $("#fruit").hide().find("input, select, textarea").val("").find('input[type=radio], input[type=checkbox]').attr('checked', false);
              $("#starch").hide().find('input[type=radio], input[type=checkbox]').attr('checked', false).find("input, select, textarea").val("");
              $("#sweets").show().find('input[type=radio], input[type=checkbox]').attr('checked', false).find("input, select, textarea").val("");
          }
      }
  </code></pre>
  
  <p>From the HTML file: The drop down box</p>
  
  <pre><code>&lt;fieldset id="food_type"&gt;
  &lt;legend&gt;select type of food&lt;/legend&gt;           
  &lt;label for="food_type"&gt;Food questions&lt;span class="require"&gt;*&lt;/span&gt;&lt;/label&gt;
  &lt;select tabindex="1" class="required" name="food_type" id="food_type"&gt;&lt;option value=""&gt;Type&lt;/option&gt;
  &lt;optgroup label="Favorite Food"&gt;
  &lt;option value="fruit" id="fruit" onclick="hide_show(this.value)"&gt;Fruit&lt;/option&gt;
  &lt;option value="starch" id="homeowners" onclick="hide_show(this.value)"&gt;Starch&lt;/option&gt;
  &lt;option value="sweets" id="sweets" onclick="hide_show(this.value)"&gt;Sweets&lt;/option&gt;\
  &lt;/optgroup&gt;
  &lt;/select&gt;
  &lt;/fieldset&gt;
  </code></pre>
  
  <p>From the HTML file: sample group of questions to appear if "Fruit" is selected from the drop down menu</p>
  
  <pre><code>    &lt;fieldset id="fruit"&gt;
      &lt;legend&gt;About your favorite fruit&lt;/legend&gt;
  
      &lt;label for="color"&gt;Color&lt;span class="require"&gt;*&lt;/span&gt;&lt;/label&gt;
      &lt;select tabindex="2" class="required" name="color" id="color"&gt;
          &lt;option value=""&gt;Select&lt;/option&gt;&lt;option value="orange"&gt;Orange&lt;/option&gt;&lt;option value="yellow"&gt;Yellow&lt;/option&gt;
      &lt;/select&gt;
      &lt;label for="taste"&gt;Taste&lt;span class="require"&gt;*&lt;/span&gt;&lt;/label&gt;
      &lt;input tabindex="16" style="width:100px; float:left;" type="text" class="required" maxlength="3" size="3" name="age" id="age"/&gt;
      &lt;label for="availability"&gt;Availability&lt;span class="require"&gt;*&lt;/span&gt;&lt;/label&gt;
      &lt;select tabindex="17" class="required" name="availability" id=" availability "&gt;
          &lt;option value=""&gt;Select&lt;/option&gt;&lt;option value="restaurant"&gt;Restaurants&lt;/option&gt;&lt;option value="farmermkt"&gt;Farmers Market&lt;/option&gt;&lt;option value="Grocer"&gt;Grocer&lt;/option&gt;
      &lt;/select&gt;
      &lt;/fieldset&gt;
  </code></pre>