使用 JavaScript jQuery 动态填充 4 个下拉列表，其中包含其余选项

Dynamically populate 4 drop-down lists with the remaining options with JavaScript jQuery

本文关键字：余选项 包含其 选项 动态 jQuery JavaScript 填充 下拉列表 使用      更新时间：2023-09-26

我有 4 个下拉列表，每个下拉列表都需要显示相同的 5 个选项减去上一个下拉列表中已选择的选项，如果以后未选择任何选项，它需要能够再次显示。如果可能的话，我只想使用CSS JavaScript和/或jQuery。

谢谢

你可以通过使用JQuery来完成这一切。

这是一个您可以使用 http://www.overpie.com/jquery/articles/jquery-remove-dropdownlist-or-combobox-options 的教程

问题是你填充所有组合框，然后选择一个，从所有其他选项中删除此选项。

如果删除该选项是一个问题，您可以随时禁用它。

试试这个：

var dropDownIds = new Array();
var optionList = new Array();
dropDownIds.push(dropdownId1);
....
....
dropDownIds.push(dropdownId4);
optionList.push({'value':value1, 'name':option1});
....
....
optionList.push({'value':value5, 'name':option5});
/* Call this function on onchange event of the first dropdown i.e. dropDownId1 */
function fillDropDowns(dropDownIds,optionList)
{
    for (var j =1; j < dropDownIds.length; j++)
    {
        var selected_option = $("#"+dropDownIds[j-1]).val();
        $("#"+dropDownIds[j]).empty();
        for (var i=0, size=optionList.length; i<size; i++){
            if (selected_option != optionList[i].value)
            {
                var option = $('<option />');
                option.attr('value', optionList[i].value).text(optionList[i].name);
                $('#'+dropDownIds[j]).append(option);
             }
         }
    }
}
相关文章：