Question

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:

<select name="booking" id="booking">
  <option value="3">Group Bookings</option>
  <option value="2" selected="selected">Port Phillip Bay Snapper Charters</option>
  <option value="6">Portland Tuna Fishing</option>
  <option value="1">Sport Fishing</option>
</select>

Here’s the second list (which will only ever have two values):

<select name="charterType" id="charterType">
  <option value="1">Individual Booking</option>
  <option value="2">Group Booking</option>
</select>

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!! 🙂

I’ve also tried using a switch, but that doesnt work either..

/* 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;
  };

It alerts, but doesn’t do anything else..

Answer 1

This will do what you needed

<select name="booking" id="booking">
  <option value="3">Group Bookings</option>
  <option value="2" selected="selected">Port Phillip Bay Snapper Charters</option>
  <option value="6">Portland Tuna Fishing</option>
  <option value="1">Sport Fishing</option>
</select>

<select name="charterType" id="charterType">
  <option value="1">Individual Booking</option>
  <option value="2">Group Booking</option>
</select> 

javascript

$("#booking").change(function(){
  $("#charterType").empty();
  if ( $(this).val() != "3" &&   $(this).val() != "2" ){
    $("#charterType").append ( $('<option>').text("Individual  Booking").val("1") );
  }

  $("#charterType").append ( $('<option>').text("Group Booking").val("2") );

});

See: http://jsbin.com/ayato