下拉框取决于使用jquery在另一个下拉框中选择的选项

Question

如何获取其他父项下拉值或如何检查子项下拉值？

这是我的示例代码：

<select id="dropdown1" class="dropdown">
    <option>val1</option>
    <option>val2</option>
</select>
<select id="dropdown2" class="dropdown">
    <option>val1</option>
    <option>val2</option>
</select>
<select id="dropdown3" class="dropdown">
    <option>val1</option>
    <option>val2</option>
</select>

这是我的下拉菜单，我想检查父级下拉菜单的值是什么？

例如，如果我选择了dropdown3，那么dropdown 1 AND 2的值是多少

Answer 1

您可以声明一个具有所有下拉列表ID的变量：

var dropdowns = $( ".dropdown" ).map(function() {
    return $( this ).attr('id');
  });

聆听每个下拉列表的onchange：

$('.dropdown').change((e) => {
    const dropdownId = e.target.id; // the changed dropdown
    const otherDropdowns = dropdowns.filter((index, id) => id !== dropdownId); // get the others
    const otherValues = otherDropdowns.map((index, id) => 
                        $('#' + id).find(":selected").val()); // get the values of others dropdowns
    console.log(otherValues);
});

https://jsfiddle.net/alonshmiel/sw17L459/