Javascript 使用数据库信息从两个下拉列表中提取两个选项

我确信这个标题非常模糊，所以让我试着解释一下我在做什么

假设我在表单中有两个下拉列表，其中包含数据库拉取的信息，如下所示：

下拉列表1

->选择1

->选择2

下拉列表2

->选择3

->选择4

下拉列表3

[没有]

我要做的是将所选选项动态地放到同一页面上的单个下拉列表中。所以看起来就像

下拉列表1

->[选定]选项1

->选择2

下拉列表2

->[选定]选项3

->选择4

下拉列表3

->选择1

->选择3

想象一个运动支架，你有两个半决赛，比如第一场比赛a队对B队，第二场比赛C队对D队。之后，如果A队获胜，C队获胜，下一场比赛将是A队对C队下拉列表3

有什么想法吗

编辑，对于已响应的用户：

---

我想我可以说得更具体一些，因为这直接回答了我的要求，我为此感谢你们。但是，我有两个初始下拉列表，其中一个选项是默认选项，因此下拉列表3中应该已经包含了1和2的两个选项。如果dropdown 1的选项更改，它将更改选项。所以默认情况下，下拉列表3将显示选项1和3，但如果我将下拉列表1更改为选项2，则下拉列表3将更改为选项2和3。这有意义吗？

您显然需要检查以确保改变主意的人不会添加超出预期的选项，例如，我选择选项1，然后选择选项4，这两个选项都会添加到新的选择中，而实际上我只想添加我的最终答案[4]

尽管如此，你还是应该开始

HTML

JS

---

您可以使用javascript动态更改第三次选择的选项

您可以在此处阅读有关获取选定值的更多信息：

从这里开始，将这些选择值注入第三个下拉列表应该是非常简单的

我会亲自聆听前两个下拉列表中的任何更改，在更改方法中，我会从第三个下拉列表中删除所有的，并附加所选的值

---

您可以使用通过更改前两个下拉列表中的任何一个来触发的javascript

在标记中添加onchange=updateDropdown参数

然后创建一个javascript函数updateDropdown，它可以在第三个下拉列表中添加或删除选项

解释了一些方法

---

你并没有确切地解释你想做什么，但这听起来像是一个完整的三月疯狂类型的下拉列表。这将增加一些复杂性，特别是如果你可以在填充后返回并更改旧的，这将使通过括号的链失效，如果这有意义的话。如果您正在尝试类似的操作，请记住，您可以在onchange中向函数传递一个参数，比如onchange=updateDropdown123，我想我可以说得更具体一些，因为这直接回答了我的要求，我对此表示感谢。但是，我有两个初始下拉列表，其中一个选项是默认选项，因此下拉列表3中应该已经包含了1和2的两个选项。如果dropdown 1的选项更改，它将更改选项。所以默认情况下，下拉列表3将显示选项1和3，但如果我将下拉列表1更改为选项2，则下拉列表3将更改为选项2和3。这有意义吗？@user3525345啊，我明白了，然后我会去芭芭拉刚刚发布的答案。无论如何，谢谢你的答案！

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

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

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