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

Question

我确定标题模糊不清，所以让我尝试解释我在做什么。

假设我有两种形式的下拉菜单，其中包含数据库抽取的信息，如下所示：

下拉菜单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的两个选项。 如果下拉菜单1的选项更改，它将更改选项。 因此，默认情况下，下拉菜单3将显示选项1和3，但是如果将下拉菜单1更改为选项2，它将下拉菜单3更改为选项2和3。这有意义吗？

Answer 1

您显然希望检查以确保改变主意的人不会添加超出期望的选项（例如，我选择了选项1，然后选择了选项4，导致两者同时添加到新选择中，而实际上我只是想要添加我的最终答案[4]。

不过，应该让您开始。

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

小提琴

Answer 2

您可以使用javascript动态更改第3个选择上的选项。

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

jQuery从下拉列表中获取选定的选项

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

我将亲自聆听前两个下拉列表的任何更改（更改时），在change方法中，我将从第三个下拉列表中删除所有内容，然后追加所选值。

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

您可以使用由前两个下拉菜单中的任何一个更改触发的javascript

在标签中添加onchange =“ updateDropdown（）”参数

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

本文介绍了几种解决方法。

您并没有真正解释您想要做什么，但是听起来好像是下拉列表中的一个完整的行进疯狂类型。 这会增加一些复杂性，特别是如果您可以在填满后返回并更改旧的，这会使通过括号的链无效（如果有道理）。 如果您尝试类似的操作，请记住，您可以将参数传递给onchange中的函数，例如onchange =“ updateDropdown（123）”