[英]Dynamic select options failing in lightbox
我有一个用来存放表格的灯箱。 有两个选择,选择英国或美国,每个都有自己的关联列表。
我已经创建了此逻辑背后的逻辑,但仍然可以在灯箱之外使用,但是一旦添加,它就会失败,并且在您选择任何一个国家/地区时都不会切换到相关选项?
这是脚本,我也使用灯箱featherlight。
<select class="country">
<option value="US">US</option>
<option value="UK">UK</option>
</select>
<select class="model">
<option></option>
</select>
<script>
$(document).ready(function() {
var selectValues = {
"UK": {
"County1": "",
"County2": ""
},
"US": {
"State1": "",
"State2": ""
}
};
var $vendor = $('select.country');
var $model = $('select.model');
$vendor.change(function() {
$model.empty().append(function() {
var output = '';
$.each(selectValues[$vendor.val()], function(key, value) {
output += '<option>' + key + '</option>';
});
return output;
});
}).change();
});
</script>
灯箱创建div的副本。 首次加载对话框时,必须连接选择框的事件。 幸运的是,您可以获得对刚刚打开的对话框的引用。
$("#openDialogButton").click(function () {
var dlg = $.featherlight("#fl1",
{
otherClose: ".btn", //any .btn will close the dialog
closeOnEsc: true
}
); //open the featherlight dialog
//FIND THE SELECT BOXES within the dialog you have just opened
var $vendor = dlg.$content.find('select.country');
var $model = dlg.$content.find('select.model');
$vendor.change(function () {
$model.empty().append(function () {
var output = '';
$.each(selectValues[$vendor.val()], function (key, value) {
output += '<option>' + key + '</option>';
});
return output;
});
}).change();
});
当您保存对话框的结果时,不能使用$(“ select.model”)。 您必须从该对象导航,例如
$("#dialogOKButton").click(function () {
var theCommentText = $("#commentText").val(); // null!
theCommentText = $(
$(this).parent()
).find("#commentText")
.val(); // have to navigate from this
alert("you entered this text "
+ theCommentText + " and clicked OK");
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.