Removing an option from a select based on the option value

Removing an option from a select based on the option value

I'm using the following code to remove an option from a select control based on a selection in a different select control and the option text in the select option that is being removed. The code works as I want it to, but I would prefer to use the option value for identifying the option to remove instead of using the option text. I've tried several different ways to do this, but can not find the proper syntax.

Here is the sample code:

  1. <html>
  2. <head>
  3. <script language="javascript" type="text/javascript" src="/ac/scripts/jquery-1.3.2.js"></script>
  4. <script type="text/javascript">
  5.     $(document).ready(function() {
  6.     //copy the second select, so we can easily reset it
  7.     var selectClone = $('#theOptions2').clone();
  8.     $('#theOptions1').change(function() {
  9.         var val = parseInt($(this).val());
  10.         //reset the second select on each change
  11.         $('#theOptions2').html(selectClone.html())
  12.         switch(val) {
  13.             //if 2 is selected remove C
  14.             case 2 : $('#theOptions2').find('option:contains(c)').remove();break;
  15.             //if 3 is selected remove A
  16.             case 3 : $('#theOptions2').find('option:contains(a)').remove();break;
  17.         }
  18.     });
  19.     $('#theOptions1').trigger('change');
  20. });
  21. </script>
  22. </head>
  23. <body>
  24. <select id="theOptions1">
  25.   <option value="1">1</option>
  26.   <option value="2" selected="selected">2</option>
  27.   <option value="3">3</option>
  28. </select>
  29. <br />
  30. <select id="theOptions2">
  31.   <option value="1">a</option>
  32.   <option value="2">b</option>
  33.   <option value="3">c</option>
  34. </select>
  35. </body>
  36. </html>

Any help with this would be greatly appreciated. It seems like there should be a simple answer, but I'm just not finding it.