Question

我有三个选择菜单，用户可以在其中选择主题，年份和季节。但是，我希望这样做，以便如果用户选择年份为'2019'，则'Fall'选项将被禁用。

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

Answer 1

为Year的更改事件创建事件处理程序，并根据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');

});

Answer 2

喜欢这个。

document.querySelector('#year').onchange = ev => {
  const value = ev.target.value;
  if (value === '2019') {
    document.querySelector('#fall').disabled = true;
  } else {
    document.querySelector('#fall').disabled = false;
  }
}

<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" id="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" id="fall" disabled>Fall</option>
</select>

Answer 3

<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" id="years">                  
    <option value="2019">2019</option>
    <option value="2018">2018</option>
    <option value="2017">2017</option>
    <option value="2016">2016</option>
</select>

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

$('#years').on('change', function(){
    if($(this).val()==='2019'){
        $("#seasons option").each(function()
        {
            if($(this).val() === 'Fall'){
                $(this).attr('disabled', 'disabled');
            }
        });
    }
});

Answer 4

您可以onchange事件并将callback绑定到该事件，以获取season select元素，并根据选择值启用和禁用Fall季节

  <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" onchange="changeYear(this.value)">                  
    <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" disabled>Fall</option>
</select>

<script>
function changeYear(value)
{
    var seasons = document.getElementsByName("Season")[0].options;
    var fallSeason = Array.apply(null, seasons).find(season => season.value === 'Fall');
    fallSeason.disabled = (value==='2019')
}
</script>

如何使if语句禁用选择选项？

4 个答案: