选择jquery禁用/删除选项?

时间:2010-03-15 05:16:42

标签: javascript jquery select show-hide

我有两个选择列表,我希望jquery删除或禁用select选项,具体取决于从第一个选择列表中选择的内容:

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

如果选择了Group Bookings或Port Phillip Bay Snapper Charters,我只需要显示“团体预订”。 (基本上隐藏“个人预订”),但我似乎无法让它工作..如果有人可以帮助我,这将是伟大的! :)

我也尝试过使用开关,但这也不起作用..

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

它提醒,但不做任何其他事情..

2 个答案:

答案 0 :(得分:2)

您可以使用

jQuery('#booking').val()获取所选值。

您可以查看示例 here

答案 1 :(得分:2)

这将做你需要的事情

<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") );

});

请参阅:http://jsbin.com/ayato