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

admin管理员组

文章数量:1023251

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>

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>

• javascript
• jquery
• html
• drop-down-menu

Share Improve this question Follow edited Nov 1, 2013 at 13:54 MrJR asked Nov 1, 2013 at 13:30 MrJRMrJR 13733 gold badges33 silver badges1111 bronze badges 6

• there are so many relevant questions in stackoverflow.just google it. – R R Commented Nov 1, 2013 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 Commented Nov 1, 2013 at 13:34
• How good are you with javascript/jQuery? So I can write answer based on your knowledge... – Entity Black Commented Nov 1, 2013 at 13:36
• I've been using it for about two or three months now. I e form a java background so most things I can figure out easily enough. Why? – MrJR Commented Nov 1, 2013 at 13:37
• Just use any of the many chained select plugins. google./search?q=chained+selects+jquery – Mika Tuupola Commented Nov 1, 2013 at 15:19

 |  Show 1 more ment

4 Answers 4

Sorted by: Reset to default 1

JS fiddle solution:

http://jsfiddle/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 ;)

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

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

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

First you have to define the binations.

var binations = {
    "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 = binations[$(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/2hwp9/

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>

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>

• javascript
• jquery
• html
• drop-down-menu

Share Improve this question Follow edited Nov 1, 2013 at 13:54 MrJR asked Nov 1, 2013 at 13:30 MrJRMrJR 13733 gold badges33 silver badges1111 bronze badges 6

• there are so many relevant questions in stackoverflow.just google it. – R R Commented Nov 1, 2013 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 Commented Nov 1, 2013 at 13:34
• How good are you with javascript/jQuery? So I can write answer based on your knowledge... – Entity Black Commented Nov 1, 2013 at 13:36
• I've been using it for about two or three months now. I e form a java background so most things I can figure out easily enough. Why? – MrJR Commented Nov 1, 2013 at 13:37
• Just use any of the many chained select plugins. google./search?q=chained+selects+jquery – Mika Tuupola Commented Nov 1, 2013 at 15:19

 |  Show 1 more ment

4 Answers 4

Sorted by: Reset to default 1

JS fiddle solution:

http://jsfiddle/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 ;)

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

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

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

First you have to define the binations.

var binations = {
    "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 = binations[$(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/2hwp9/

本文标签： javascriptDisplay options in a dropdown based on what is selected in another dropdownStack Overflow