Question

我使用Bootstrap 4创建了一个四部分模态下拉列表。

前两个下拉列表执行没有任何问题，显示所有可用值。但是，最后两个下拉列表不会执行下拉列表值。

我在下面提供了示例代码，请查看代码并提供任何帮助。非常感谢。

Answer 1

首先，我建议您参考以下几点：

在处理这样的项目时，使用能自动检查语法（或更健壮的代码编辑器）的IDE，例如Visual Studio Code或Sublime。

VSCode：https://code.visualstudio.com/

崇高：https://www.sublimetext.com/

使用开发人员工具控制台，您将看到错误和其他有用信息。

Chrome开发者工具：https://developer.chrome.com/devtools

稍后要记住的一些事情，我在这里看到两个需要解决的问题。

初始化dataFourthSelect对象时出现语法错误。看起来您正在使用不同的样式引用来关闭键。这是更正后的版本：

var dataFourthSelect = {
    'C' : [{
        form: 'CNN', 
        link: 'https://www.cnn.com'
    }],
    'D' : [{ 
        form: 'MSNBC', 
        link: 'http://www.msnbc.com'
    }]
}

另一个问题是分配给a的值不是dataThirdSelect的关键：

$('#test2').on('change', function() {
    var a = $(this).val();
    if (a !== '') {
        for (var i = 0; i < dataThirdSelect[a].length; i++) {
            $('#test3').append($("<option></option>")
                .attr("value", dataThirdSelect[a][i])
                .text(dataThirdSelect[a][i]));
        }
    }
});

按照之前构建的选项，我认为您想要更改Test1和Test2键：

var dataThirdSelect = {
    Test1: ['C', 'D'],
    Test2: ['G', 'H']
}

到

var dataThirdSelect = {
    A : ['C', 'D'],
    B : ['G', 'H'],
    E : ['C', 'D'], //Fill these in with the desired values.
    F : ['G', 'H']
}

希望这能让你走上正轨。

[编辑]为了帮助回答您的评论：根据您当前的设计，我建议您在每次更改事件时将所选值分配给字典。例如：

var selectedOptions = {};

$('#test2').on('change', function() {
    var a = $(this).val();
    selectedOptions['test2'] = a
    //...
}

然后在提交时，您可以检查这些值：

Object.keys(selectedOptions).forEach((option) => {
    //Do something with each option using selectedOptions[option]
    console.log(selectedOptions[option]);
});

模态下拉列表

1 个答案: