时间戳

首页 > 解决方案 > 如何制作 if 语句以禁用选择选项？

javascript - 如何制作 if 语句以禁用选择选项？

问题描述

我有三个选择菜单，用户可以在其中选择主题、年份和季节。但是，我希望这样如果用户选择“2019”年，“秋季”选项将被禁用。

<select name="Subject">                  
    <option value="Math">Math</option>
    <option value="Physics">Physics</option>
    <option value="Chemistry">Chemistry</option>
    <option value="Biology">Biology</option>
</select>

<select name="Year">                  
    <option value="2019">2019</option>
    <option value="2018">2018</option>
    <option value="2017">2017</option>
    <option value="2016">2016</option>
</select>

<select name="Season">                  
    <option value="Spring">Spring</option>
    <option value="Fall">Fall</option>
</select>

标签： javascriptjqueryhtml

解决方案

为 Year's change 事件创建和事件处理程序，并根据 Year 的新值禁用季节。

https://jsfiddle.net/075fnm4a/

HTML

<select name="Subject">                  
    <option value="Math">Math</option>
    <option value="Physics">Physics</option>
    <option value="Chemistry">Chemistry</option>
    <option value="Biology">Biology</option>
</select>

<select name="Year">                  
    <option value="2019">2019</option>
    <option value="2018">2018</option>
    <option value="2017">2017</option>
    <option value="2016">2016</option>
</select>

<select name="Season">                  
    <option value="Spring">Spring</option>
    <option value="Fall">Fall</option>
</select>

jQuery

$(document).ready(function(){

  $('select[name="Year"]').on('change',function(){
    var $this = $(this);  
    $('select[name="Season"]').find('option[value="Fall"]').prop('disabled', ($this.val() == '2019') ); // disabled or enabled 
  });

  $('select[name="Year"]').trigger('change');

});

推荐阅读