Javascript lightbox中的动态选择选项失败
我有一个灯箱,用来装一个表格。有两种选择,选择英国或美国,每个都有自己的关联列表 我已经在灯箱之外创建了这背后的逻辑,但一旦添加到灯箱中,它就会失败,并且在选择任何一个国家时都不会切换到相关选项 这是脚本,我也在使用lightbox featherlightJavascript lightbox中的动态选择选项失败,javascript,jquery,html,forms,lightbox,Javascript,Jquery,Html,Forms,Lightbox,我有一个灯箱,用来装一个表格。有两种选择,选择英国或美国,每个都有自己的关联列表 我已经在灯箱之外创建了这背后的逻辑,但一旦添加到灯箱中,它就会失败,并且在选择任何一个国家时都不会切换到相关选项 这是脚本,我也在使用lightbox featherlight <select class="country"> <option value="US">US</option> <option value="UK">UK</opti
<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>
我们
英国
$(文档).ready(函数(){
var selectValues={
“英国”:{
“第1国”:“第1国”,
“County2”:”
},
“美国”:{
“状态1”:“状态1”,
“状态2”:”
}
};
变量$vendor=$('select.country');
var$model=$('select.model');
$vendor.change(函数(){
$model.empty().append(函数()){
var输出=“”;
$.each(选择值[$vendor.val()],函数(键,值){
输出+=''+键+'';
});
返回输出;
});
}).change();
});
Lightbox创建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();
});
$("#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");
});