title: jquery disable/remove option on select?
body: <p>I have two select lists, I would like jquery to either remove or disable a select option, depending on what is selected from the first select list:</p>
  
  <pre><code>&lt;select name="booking" id="booking"&gt;
    &lt;option value="3"&gt;Group Bookings&lt;/option&gt;
    &lt;option value="2" selected="selected"&gt;Port Phillip Bay Snapper Charters&lt;/option&gt;
    &lt;option value="6"&gt;Portland Tuna Fishing&lt;/option&gt;
    &lt;option value="1"&gt;Sport Fishing&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>Here's the second list (which will only ever have two values):</p>
  
  <pre><code>&lt;select name="charterType" id="charterType"&gt;
    &lt;option value="1"&gt;Individual Booking&lt;/option&gt;
    &lt;option value="2"&gt;Group Booking&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>If Group Bookings or Port Phillip Bay Snapper Charters are selected, I need only "Group Booking" to be displayed. (To basically hide "Individual Booking") but I can't seem to get it to work.. If someone could help me that'd be great!! :)</p>
  
  <p>I've also tried using a switch, but that doesnt work either..</p>
  
  <pre><code>/* select list */
    switch (jQuery('#booking :selected').text()) {
      case 'Sport Fishing':
        alert('AA');
      break;
      case 'Port Phillip Bay Snapper Charters':
        jQuery("#charterType option[value=1]").remove();
        alert('BB');
      break;
      case 'Portland Tuna Fishing':
        alert('CC');
      break;
      case 'Group Bookings':
        alert('DD');
      break;
    };
  </code></pre>
  
  <p>It alerts, but doesn't do anything else..</p>