Pulling Two Options from Two Dropdowns with Database Information

Question

I'm sure that title is vague as hell, so let me try to explain what I'm doing.

Let's say that I have two drop downs in a form that have database-pulled information in them, like this:

Dropdown 1

->Option 1

->Option 2

Dropdown 2

->Option 3

->Option 4

Dropdown 3

[nothing]

What I'm looking to do is to bring the selected options into a single dropdown on the same page dynamically. So it would then look like

Dropdown 1

->[SELECTED] Option 1

-> Option 2

Dropdown 2

->[SELECTED] Option 3

-> Option 4

Dropdown 3

->Option 1

->Option 3

Picture a sports bracket where you have two "semi-finals," like Team A vs Team B for game 1, then Team C vs Team D for game 2. After that, if Team A wins (selected) and Team C wins (selected), the next game would be Team A vs Team C (dropdown 3).

Any ideas?

Edit, for those that have responded: I suppose I could have been more specific, as this directly answers what I asked for, and I thank you for that. However, I have both of the initial dropdowns having one of the options as the default, so dropdown 3 should already have both of the options from 1 and 2 in it. It would change the options if dropdown 1's option changed. So by default, dropdown 3 would show option 1 and 3, but if I changed dropdown 1 to option 2, it would change dropdown 3 to option 2 and 3. Does that make sense?

Answer 1

You'll obviously want to check to make sure someone who changes their mind doesn't add more options than desired (e.g., I choose option 1, and then choose option 4 leading to both being added to the new select when in reality I only wanted my final answer [4] added).

Nevertheless, should get you started.

HTML

<select class="component" name="blah">
    <option value="1">1</option>
    <option value="2">2</option>
</select>
<select class="component" name="blah2">
    <option value="3">3</option>
    <option value="4">4</option>
</select>
<select name="combined"></select>

JS

$(function () {
    $('.component').change(function () {
        $('select[name="combined"]').append('<option value="' + $(this).val() + '">' + $(this).val() + '</option>')
    })
})

Fiddle

Answer 2

You can use javascript to dynamically alter the options on the 3rd select.

you can read more on getting selected values here :

jQuery Get Selected Option From Dropdown

from here it should be pretty straight forward to injecting those selecting values to the 3rd dropdown.

I would personally listen to any changes (on change) for the first two dropdowns, in the change method i would remove all 's from the 3rd dropdown and .append the selected values.

Answer 3

http://jsfiddle.net/JEDA4/

<select id="one">
    <option>Option 1 - 1</option>
    <option>Option 1 - 2</option>
</select>
<select id="two">
    <option>Option 2 - 1</option>
    <option>Option 2 - 2</option>
</select>
<select id="three">
</select>

$('#one, #two').on('change',function() {
    $('#three').empty().append('<option>' + $("#one option:selected" ).text() + '</option>').append('<option>' + $("#two option:selected" ).text() + '</option>');
});

Answer 4

You can use javascript that is triggered by a change being made to the either of the first 2 dropdowns

in your tag add a onchange="updateDropdown()" parameter

and then create a javascript function updateDropdown() which can add or remove options from the 3rd dropdown

This article explains a few approaches to that.

You didn't really explain exactly what you want to do, but it sounds like maybe a full march madness type bracket of dropdowns. That would add some complexity especially if you can go back and change old ones after it's filled in which would invalidate a chain through the bracket if that makes sense. If you are attempting something like that remember that you can pass a parameter to the function in your onchange like this onchange="updateDropdown(123)"