根据在另一个下拉菜单中选择的内容在一个下拉菜单中显示选项

Question

I want to display options in a drop down menu based on what is already selected in another drop down menu. I have 16 options in the first drop-down, so I want to show different options in the second drop down for each selection in the first. I would like to do this using javascript or jquery.

Here is the first drop down in my html file:

           <div>
               <label for="failureReason">Failure Reason:</label> <select
                    id="failureReason" data-theme="a" data-icon="arrow-d" data-iconpos="right">
                    <option value="1">Damage</option>
                    <option value="9">Calibration Failure</option>
                    <option value="5">Component Failure</option>
                    <option value="93">Customer Request</option>
                    <option value="5">Error on Potted SUT</option>
                    <option value="41">Installation Error</option>
                    <option value="6">Interference</option>
                    <option value="46">Network Issue</option>
                    <option value="3">No Fault Found</option>
                    <option value="8">No Power/Fuse Blown</option>
                    <option value="23">Non-AMCS Issue</option>
                    <option value="49">OBC HW Issue</option>
                    <option value="30">OBC SW Issue</option>
                    <option value="2">Training Issue</option>
                    <option value="68">Truck Not Available</option>
                    <option value="51">Routine Maintenance</option>
                </select>
                <!-- Put in options for failure reason -->
            </div>

And I want to display different options inside this drop-down depending on what has been selected for "Failure Reason":

<div>
                <label for="solutionId">Solution Id:</label> <select
                    id="solutionId" data-theme="a" data-icon="arrow-d" data-iconpos="right">
                    <option value="1">Repaired</option>
                    <option value="2">Restarted</option>
                    <option value="3">Reinstalled Software</option>
                    <option value="4">Replaced Loadcell</option>
                    <option value="5">Replaced SUT</option>
                </select>
                <!-- Put in options for Solution Id -->
            </div>

I've seen other examples, but nothing like what i'm trying to achieve. I need to be able to get the "value" of whatever option is shown and chosen for use in other parts of my javascript file.

EDIT:

I realise my question is a bit confusing. I'll try to be more clear. If "damage" is selected for failure reason, I want to show:

<div>
            <label for="solutionId">Solution Id:</label> <select
                id="solutionId" data-theme="a" data-icon="arrow-d" data-iconpos="right">
                <option value="1">Repaired</option>
                <option value="3">Reinstalled Software</option>
                <option value="4">Replaced Loadcell</option>
            </select>
            <!-- Put in options for Solution Id -->
        </div>

But if "calibration failure" is chosen, I want to show:

<div>
            <label for="solutionId">Solution Id:</label> <select
                id="solutionId" data-theme="a" data-icon="arrow-d" data-iconpos="right">
                <option value="1">Repaired</option>
                <option value="2">Restarted</option>
                <option value="5">Replaced SUT</option>
            </select>
            <!-- Put in options for Solution Id -->
        </div>

Answer 1

JS fiddle solution:

http://jsfiddle.net/ZjhWV/1/

Not the best solution, but working one. Make a some list of text contents from first select and link them with available options from second one.

I used textContent from first one and linked it with option values from second one. But you can make link based on different property of the option (id, value, text content... ).

You can get text content from currently selected option with this.options[this.selectedIndex].textContent .

PS: In case that array is empty, all options are available...

javascript:

    var subselectContains = {
    "Damage": [1, 3, 5],
        "Calibration Failure": [],
        "Component Failure": [2],
        "Customer Request": [],
        "Error on Potted SUT": [1],
        "Installation Error": [],
        "Interference": [],
        "Network Issue": [],
        "No Fault Found": [],
        "No Power/Fuse Blown": [],
        "Non-AMCS Issue": [],
        "OBC HW Issue": [],
        "OBC SW Issue": [],
        "Training Issue": [],
        "Truck Not Available": [],
        "Routine Maintenance": []
};

var failureReson = $("#failureReason");
var solutionOptions = $("#solutionId option");


failureReson.change(function () {
    var visibleOptions = subselectContains[this.options[this.selectedIndex].textContent];

    if (visibleOptions.length != 0) {
        solutionOptions.hide();


        solutionOptions.each(function () {
            for (var i = 0; i <= visibleOptions.length; i++) {
                if (this.value == visibleOptions[i]) {
                    $(this).show();
                }
            }
        });
    } else {
        solutionOptions.show();
    }
});

EDIT: My solution is just a short version. It works only when you change first select and it doesn't affect the currently selected option. But I'm sure you can solve this on your own ;)

Answer 2

Hope already you got answer but it is easy answer. check this post I don't have reputation to comment so posting as answer . check this answer its good and clear.

Javascript change drop-down box options based on another drop-down box value

Answer 3

Use a .change event on the first drop down, grab the value, and do what you need:

$("#failureReason").change(function() {
    var selected = this.value;
    var second = $("#solutionId option:selected").val();
});

Answer 4

First you have to define the combinations.

var combinations = {
    "option1": ["option1-a", "option1-b", "option1-c"],
    "option2": ["option2-a", "option2-b", "option2-c"],
    "option3": ["option3-a", "option3-b", "option3-c"]
}

So in your first drop down you would add a .change event that would find the new value, then fill the second drop down with those options.

$('#failureReason').change(function(){
    var template = '<option>Solutions</option>';  // will hold html for second drop down.

    solutions = combinations[$(this).val()];
    $.each(solutions, function(i, solution){
        template += '<option value="' + solution + '">' + solution + '</option>'
    });

    $('#solutionId').html(template);
});

If you'll notice, I just gave each option the same value as the text displayed. It would be fairly simple to give each option a custom value.

JSFiddle: http://jsfiddle.net/2hwp9/