Choose select based on another selects value

Question

Is it possible to prevent the second select from choosing "EXEMPT" if the first select is NOT at least ten years old? If the year is NOT 10 years old or older when EXEMPT is chosen a message should pop up stating it must be 10 years old or older.

Any help with this would be greatly appreciated!

$(document).on('change', '#ostatus', function() {

    var oreading = $('#oreading');

    if($(this).val()==='Exempt') {
        FC.odometerReading = null;
        oreading.val($(this).val()).prop('readOnly', true);
        oreading.valid();
        $('#oreading_field').hide();
        $('#odometerDatePicker_field').hide();
        $('#digit_field').hide();
    } else {
        FC.odometerReading = null;
        oreading.val('').prop('readOnly', false);
        $('#oreading_field').show();
        $('#odometerDatePicker_field').show();
        $('#digit_field').show();
    }
    calculateTotal();
});

user_13669048 · Answer

You can simply use .attr to disabled the Exempt option if the year is older then 10 from the current year by using new Date() function and getting year getFullYear - minus first 10 year goes back to 2010

When you select year more then 10 year old then it will disable otherwise it will enable again as you wanted.

Also, ideally you want to set selectedIndex of osStatus to 0. Because user might change year but os status is still selected as existing/previous one.

Run snippet below.

$(document).on('change', '#vehicleyear', function() {
  
  //Get current year minus 10 years
  var year = new Date().getFullYear().toString() - 10

 //Set status option to null
 $('#ostatus').prop('selectedIndex',0);
  
  //Disabled Exempt
  if (this.value > year) {
    $("#ostatus option[value='Exempt']").attr('disabled', "disabled");
  } else {
    $("#ostatus option[value='Exempt']").attr('disabled', false);
  }
})

user_13378247 · Answer

I added the following code to your snippet:

const olderThan10 = +$('#vehicleyear').val() < (new Date().getFullYear() - 10);
if (!olderThan10) alert('Must be older than 10.');

This check is performed only when the second select's value is changed to Exempt from a different option.

$(document).on('change', '#ostatus', function() {

    var oreading = $('#oreading');

    if($(this).val()==='Exempt') {
        const olderThan10 = +$('#vehicleyear').val() < (new Date().getFullYear() - 10);
        if (!olderThan10) alert('Must be older than 10.');
        FC.odometerReading = null;
        oreading.val($(this).val()).prop('readOnly', true);
        oreading.valid();
        $('#oreading_field').hide();
        $('#odometerDatePicker_field').hide();
        $('#digit_field').hide();
    } else {
        FC.odometerReading = null;
        oreading.val('').prop('readOnly', false);
        $('#oreading_field').show();
        $('#odometerDatePicker_field').show();
        $('#digit_field').show();
    }
    calculateTotal();
});

user_9922011 · Answer

You could add an event listener and then make compare the value selected if it's less than 10 year you add attribute disable to the option

var oreading = $('#vehicleyear')
    oreading.on("change",()=>{
        if(2020-oreading.val()<10){
            console.log("less than 1o",oreading.val())
        $("#exmpt").attr("disabled","disabled");
          console.log("less than 1o")
    }
    else $("#exmpt").removeAttr("disabled","disabled");
    })

    $(document).on('change', '#ostatus', function() {
 
    
var oreading = $('#oreading');



if($(this).val()==='Exempt') {
    FC.odometerReading = null;
    oreading.val($(this).val()).prop('readOnly', true);
    oreading.valid();
    $('#oreading_field').hide();
    $('#odometerDatePicker_field').hide();
    $('#digit_field').hide();
} else {
    FC.odometerReading = null;
    oreading.val('').prop('readOnly', false);
    $('#oreading_field').show();
    $('#odometerDatePicker_field').show();
    $('#digit_field').show();
}
calculateTotal();
});

Choose select based on another selects value

3 Answers