JQuery leaving text in a select box that should be hidden
<p>I have a form that looks like:</p>

<pre><code>&lt;form action="search.php" method="post"&gt;
        &lt;fieldset&gt;
          &lt;label for="level_one"&gt;Main category&lt;/label&gt;
          &lt;select name="level_one" id="level_one"&gt;
            &lt;option value="0"&gt;All main categories&lt;/option&gt;
                        &lt;option value="7"&gt;Health&lt;/option&gt;
                        &lt;option value="11"&gt;Life&lt;/option&gt;
                        &lt;option value="8"&gt;Mind&lt;/option&gt;
                        &lt;option value="16"&gt;Relationships&lt;/option&gt;
                      &lt;/select&gt;
          &lt;label for="level_two"&gt;Sub category&lt;/label&gt;
          &lt;select name="level_two" id="level_two"&gt;
            &lt;option value="0" class="no_parent"&gt;All categories&lt;/option&gt;
                        &lt;option value="36" class="parent_id_7"&gt;Swine flu&lt;/option&gt;
                        &lt;option value="34" class="parent_id_7"&gt;Therapies&lt;/option&gt;
                        &lt;option value="40" class="parent_id_11"&gt;Bullying&lt;/option&gt;
                        &lt;option value="28" class="parent_id_11"&gt;Volunteering&lt;/option&gt;
                        &lt;option value="19" class="parent_id_8"&gt;Depression&lt;/option&gt;
                        &lt;option value="29" class="parent_id_16"&gt;Relationship problems&lt;/option&gt;
                        &lt;option value="37" class="parent_id_16"&gt;Separation and divorce&lt;/option&gt;
                      &lt;/select&gt;

          &lt;input type="submit" value="Search" /&gt;
        &lt;/fieldset&gt;
      &lt;/form&gt;
</code></pre>

<p>With JQuery I hide the second select, then when the first select changes JQuery looks at the selection and shows the second select with only the relevant items in it.
The JQuery:</p>

<pre><code>$(document).ready(function () {
  $('#level_two').hide()
  $('#level_one').change(function(){
   var current = $(this).val();
   if(current == 0) {
     $('#level_two').hide()
   } else {
     $('#level_two option').not('.no_parent').hide()
     $('.parent_id_'+current).show();
     $('#level_two').val("no_parent");  //gert g's addition :)
     $('#level_two').show()
   }
  });
});
</code></pre>

<p>This works fine except for a small issue.  If I select "Health" in select 1, select 2 shows "swine flu" and "Therapies", then I select "Therapies", now if I select life in select 1, select 2 shows the correct options except the default text in select 2 still says "Therapies" even though the therapies option is hidden.</p>

<p>Is there a way to refresh the text to stop this happening.</p>

<p>Regards</p>

<p>Luke </p>

<p>UPDATE:  <em>I have updated the code to working order thanks to @Gert G for the solution</em></p>

<p>UPDATE: <em>The current solution only works in FireFox :(</em></p>

<p>UPDATE: I have used a slightly modified version of <a href="http://stackoverflow.com/questions/877328/jquery-disable-select-options-based-on-radio-selected-need-support-for-all-brows/877478#878331">@Paolo Bergantino</a>'s solution that works for sure on chrome and FF, yet to finish testing all browsers.</p>

<pre><code>jQuery.fn.filterOn = function(radio, values) {
        return this.each(function() {
          var select = this;
          var options = [];
          $(select).find('option').each(function() {
            options.push({value: $(this).val(), text: $(this).text()});
          });
          $('#level_two').data('options', options);
          $('#level_one').change(function() {
            var options = $(select).empty().data('options');
            var haystack = values[$(this).val()];
            if($(this).val()==0){
              $('#level_two').hide().siblings('label[for="level_two"]').hide();
            } else $('#level_two').show().siblings('label[for="level_two"]').show();
            $.each(options, function(i) {
              var option = options[i];
              if($.inArray(option.value, haystack) !== -1) {
                $(select).append(
                $('&lt;option&gt;').text(option.text).val(option.value)
              );
              }
            });
          });
        });
      };
      $(document).ready(function () {
        $('#level_two').hide().siblings('label[for="level_two"]').hide();
        $(function() {
          $('#level_two').filterOn('#level_one', {
                        '7': ["35","12","17","32","33","46","30","31","15","36","34"],
                        '11': ["40","25","27","41","22","26","44","28"],
                        '8': ["19","21","20"],
                        '16': ["29","37","23"],
                        '10': ["14","43","45","39"],
                      }); //note there are way more values in these arrays as I did not enter the full form that I am using above just a short example
        });
      });
</code></pre>
