确实需要一些帮助:
所以我使用的是一个名为featherlight的灯箱。我在那里有一个表单,该表单有几个输入字段,但我需要帮助的两个字段是国家/地区选择,因此您选择“美国”或“英国”,无论您选择哪一个,下一个选项列表都会相应更改。
现在,它在灯箱之外工作得很好,所以直接到 body 上,但一旦我将它放在灯箱内的表单中,它就会失败。
这是我的动态选择器脚本。
<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>
下面是它的实际演示:
所以主要问题是它在灯箱中不起作用,我显然错过了一些东西。
最佳答案
您需要将 JavaScript 移至一个函数,并在加载 Featherlight 后绑定(bind)它。
$(document)
这意味着您的脚本将在页面加载时应用于 DOM 元素。如果在加载 DOM 后,featherlight 正在加载您的选择菜单,那么您将需要手动将 javascript 代码绑定(bind)到新元素。
关于javascript - 灯箱未加载动态选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24965592/