javascript - 表单字段中的选项隐藏下一个字段中的选项

Question

当在研讨会日期字段中选择“4 月 13 日星期一”时，我试图让“上午 10 点 30 分”选项在研讨会时间字段中消失。否则，如果该选项被禁用，我会很高兴。

<div class="form-group">
<form action="ksmail.php" method="POST">
    <div class="form-group">
        <div class="row">
            <p class="control-label blue">Workshop Date:</p>
            <select name="date" class="finput" id="wdate">
                <option value="11th_APR">Saturday 11th April</option>
                <option value="13th_APR" id="dt">Monday 13th     April</option>
                <option value="18th_APR">Saturday 18th April</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <div class="row">
            <p class="control-label blue">Workshop Time:</p>
            <select name="time" class="finput" id="wtime">
                <option value="9am" id="tn">9am</option>
                <option value="10_30am" id="tt">10.30am</option>
            </select>
        </div>
    </div>
    <div class="row">
        <input type="submit" value="Send" class="btn btn-default">
    </div>
</div>
</form>
</div>

JavaScript

$('#wtime') .show();  
$('#wdate').bind('change', function (e) {   
if( $('#wdate').val() == "#dt") {  
    $('#tt').hide();  
}  

CSS

#wtime{display: none;}

我已经尝试了很多变体，但都不起作用。抱歉，我是 jquery 新手/白痴。任何帮助将不胜感激。

Answer 1

如果你想禁用该选项

 $('#wdate').on('change', function (e) { 
  if( $(this).val() == "13th_APR") {  
  $("#wtime option[value='10_30am']").attr('disabled','disabled');
  }
});

或者如果你想删除选项

 $('#wdate').on('change', function (e) { 
  if( $(this).val() == "13th_APR") {  
   $("#wdate option[value='10_30am']").remove();
  }
});

希望对你有帮助