Select Options Determined by Another Select’s Selection

[Prodjex]

Sometimes you may have form elements that you need to changed based on other input.  For example I have two selects on my page.  The first one if the primary goal.  The second is a multiselect box of secondary goals.  Based on the users input on the first select I don’t want them to be able to select the same item in their secondary goals.  This is how you can manipulate the second select by using onChange jQuery commands. The library used for the multiselect is Bootstrap Multiselect.

Here is the HTML of my current form:

<div class="container">
    <div class="row">
        <div class="col-md-12 text-center">
            <h1 id="setPageName"></h1>
            <div class="col-md-6 col-md-offset-3">
                <div class="form-group">
                    <label>Select a Primary Goal</label>
                    <select id="primaryGoal" class="form-control" name="companyGoal" required="">
                        <option value="">Select a Primary Goal</option>
                        <option value="1">Build a website</option>
                        <option value="2">Update a website</option>
                        <option value="3">Fix a website</option>
                        <option value="11">Build a custom web application</option>
                    </select>
                </div>

                <div class="form-group">
                    <label>Select Any Additional Goals</label>
                    <select id="stGoal" class="form-control" name="companyGoalST[]" required multiple="multiple">
                        <option value="1">Build a website</option>
                        <option value="2">Update a website</option>
                        <option value="3">Fix a website</option>
                        <option value="11">Build a custom web application</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
</div>

Here’s the jQuery needed to modify the second select based on the input of the first select:

$(document).ready(function() {
        $('#primaryGoal').change(function() {
            // Remove the selected option from the child
            $("option[value='" + $(this).val() + "']",$('#stGoal')).remove();
            // Now loop through all primary to add previous removed option
            var prevValue = "";
            $("option",$(this)).each(function() {
                // Only add not selected options
                if ($(this).is(":selected") == false) {
                    // Check if the current primary option is not in the child list and it is not the empty select goal option
                    if ($("option[value='" + $(this).val() + "']",$('#stGoal')).length == 0 && $(this).val().length > 0) {
                        if (prevValue == "") {
                            $("option[value='2']",$('#stGoal')).before($('<option>', {
                                value: $(this).val(),
                                text: $(this).text()
                            }));
                        } else {
                            $("option[value='" + prevValue + "']",$('#stGoal')).after($('<option>', {
                                value: $(this).val(),
                                text: $(this).text()
                            }));
                        }
                    }
                }
                prevValue = $(this).val();
            });
            // Rebuild the multi select
            $('#stGoal').multiselect('rebuild');
        });
        $('#stGoal').multiselect({
            nonSelectedText: 'Select Goal',
            buttonWidth: '100%',
            onChange: function(option, checked) {
                // Get selected options.
                var selectedOptions = $('#stGoal option:selected');

                if (selectedOptions.length >= 2) {
                    // Disable all other checkboxes.
                    var nonSelectedOptions = $('#stGoal option').filter(function() {
                        return !$(this).is(':selected');
                    });

                    var dropdown = $('#stGoal').siblings('.multiselect-container');
                    nonSelectedOptions.each(function() {
                        var input = $('input[value="' + $(this).val() + '"]');
                        input.prop('disabled', true);
                        input.parent('li').addClass('disabled');
                    });
                }
                else {
                    // Enable all checkboxes.
                    var dropdown = $('#stGoal').siblings('.multiselect-container');
                    $('#stGoal option').each(function() {
                        var input = $('input[value="' + $(this).val() + '"]');
                        input.prop('disabled', false);
                        input.parent('li').addClass('disabled');
                    });
                }
            }
        });
    });

Check out the working demo here.

The post Select Options Determined by Another Select’s Selection appeared first on Kansas City Web Consulting | Kansas City Web Development.

View the full article