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

时间:2015-03-17 04:46:32

标签: javascript jquery html css forms

我正在努力获得" 10.30am"在4月13日星期一"" 4月13日星期四和#34;在Workshop日期字段中选择。如果选项刚刚禁用,我会很高兴。

<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新手/白痴。任何帮助将不胜感激。

2 个答案:

答案 0 :(得分: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();
  }
});

希望这有帮助

答案 1 :(得分:0)

你的病情似乎错了。尝试这个,希望这有帮助:

$('#wtime').show();  
 $('#wdate').on('change', function (e) { 

  if( $(this).val() == "13th_APR") {  
    $('#tt').hide();  
  }
  else
  {
    $('#tt').show();
  }
});