Question

可以通过以下方式提供一些帮助：

所以我使用的是名为featherlight的灯箱。我有一个表单，表单有一些输入字段，但我需要帮助的两个是国家/地区选择，因此您选择我们或英国，无论您选择哪一个，下一个选项列表都会相应更改。

现在，它在灯箱外部工作得非常好，所以直接放在身体上，但只要我将它放在灯箱内，它就会失败。

这是动态选择器的脚本。

<script>

var ukCities = ['Avon', 'Bedfordshire', 'Berkshire'];
var usCities = ['Alabama', 'Alaska', 'Arizona'];

$(document).on("change", "select.country", function() {
    var country = $("select.country").val();
    var cities;
    if(country === 'UK'){
        cities = ukCities;
    }
    else{
        cities = usCities;
    }
    $("select.city").empty();
    $.each(cities, function(index, element){
            $("select.city").append($("<option></option>").attr("value", country).text(element));
    });
});
$("select.country").val('UK').trigger('change');

</script>

以下是表格：

 <select style="width: 64%;" name="country" class="country">
            <option value="UK">UK</option>
            <option value="US">US</option>
            </select>


            <select class='city'>

            </select>

以下是它的实际演示：

Demo fiddle

因此主要问题是它无法在灯箱中使用，我显然遗漏了一些东西。

Answer 1

你需要将你的javascript移动到一个函数，并在加载你的羽毛灯后绑定它。

$(document)

这意味着您的脚本将在页面加载时应用于DOM元素。如果在加载DOM后，featherlight正在加载您的选择菜单，那么您需要手动将javascript代码绑定到新元素。

Lightbox没有加载动态选择器

1 个答案: