Question

I am creating some selectboxes where i need to restrict my options depending on the choice made in the primary.

Basically i have Select field 1 and Select field 2.

Data for these selectboxes are parsed from a database.

Select field 1:

errortype_id | errortype_text

Select field 2:

errorreason_id | errortype_id | errorreason_text

Is there a straightforward way i can customsize the option data in Select field 2 depending on the choice made in Select field 1? I have the variable/attribute in my Select field 2 table to filter.

Answer 1

See this question. Basically, you need to add a change event and check $(this).val(). From there you simply create option-elements and add them as the html to your select box 2.

$('#select1').change(function() {
    var options = '';
    if($(this).val() == 'a') {
        options = '<option value="1">1</option><option value="2">2</option>';
    }
    else if ($(this).val() == 'b'){
        options = '<option value="3">3</option><option value="4">4</option>';
    }

    $('#select2').html(options);
});

EDIT: I didn’t understand if you wanted to actually filter the values, remove values, or add however many you wish. If you really want to filter out elements you can use my change event and combine that with .filter().