Display options in a drop-down based on what is selected in another drop-down

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>

there are so many relevant questions in stackoverflow.just google it. — R R, Nov 01 '13 at 13:32
I have already, but none show how to get the value of the option shown in the second drop-down when it's chosen. — MrJR, Nov 01 '13 at 13:34
How good are you with javascript/jQuery? So I can write answer based on your knowledge... — Entity Black, Nov 01 '13 at 13:36
I've been using it for about two or three months now. I come form a java background so most things I can figure out easily enough. Why? — MrJR, Nov 01 '13 at 13:37
Just use any of the many chained select plugins. https://www.google.com/search?q=chained+selects+jquery — Mika Tuupola, Nov 01 '13 at 15:19
+1 This looks perfect http://www.appelsiini.net/projects/chained .Thank you for the reply — MrJR, Nov 01 '13 at 15:24

score 1 · Accepted Answer · answered Nov 01 '13 at 14:21

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

score 1 · Answer 2 · edited May 23 '17 at 11:59

1

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

edited May 23 '17 at 11:59

Community

1
1

answered Nov 05 '15 at 09:13

user5527963

26
5

tymeJV · Answer 3 · 2013-11-01T13:59:01.233

0

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();
});

edited Nov 01 '13 at 13:59

answered Nov 01 '13 at 13:42

tymeJV

103,943
14
161
157

I can easily get the value from the first one. I need to get the value from the second one i.e, after an option for the first one has been chosen, options are shown in the second one. I then need to get the value of the option chosen for the second one. – MrJR Nov 01 '13 at 13:44
Thanks for the response, will test now and let you know if it works. – MrJR Nov 01 '13 at 14:03

senordev · Answer 4 · 2013-11-01T15:14:22.697

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/

Is there any chance you could provide a working jsfiddle so that I can see how your solution works more clearly? Thanks in advance — MrJR, Nov 01 '13 at 15:06
@user2932418 absolutely, just edited my answer. Link is at the bottom. I misunderstood the question so I also added a div to display text when an option is selected from the second dropdown. — senordev, Nov 01 '13 at 15:15

Display options in a drop-down based on what is selected in another drop-down

4 Answers4