[英]Lightbox killing javascript form options
因此我使用的表格存在棘手的问题。 因此将其放置在效果良好的灯箱中。 问题是有一个选项可以根据您之前选择的内容来切换随后的选项。
此操作在灯箱外部有效,但在表单内的灯箱中运行失败。
我正在使用以下示例: Demo Fiddle
因此,首先将其加载到标题中:
<script src="http://code.jquery.com/jquery-1.7.0.min.js"></script>
<script src="release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
这是导致问题的表格部分:
<div class="lightbox" id="fl1">
<form>
<select name="select1" id="select1">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
<select name="select2" id="select2">
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM<option>
</select>
</form>
</div>
这两个脚本位于页面底部:
<script>
$("#select1").change(function() {
if($(this).data('options') == undefined){
/*Taking an array of all options-2 and kind of embedding it on the select1*/
$(this).data('options',$('#select2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html(options);
});
</script>
我对您使用的灯箱库不太熟悉。 我无法弄清楚如何隐藏原始div并保持覆盖内容显示出来。 这很奇怪,因为它复制了元素,所以发生的是您要绑定到原始元素,但是创建的新元素却没有它。
http://jsfiddle.net/fRuhn/940/更新了小提琴,但这是代码:
<select name="select1" class="select1">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
<select name="select2" class="select2">
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM<option>
</select>
更改为基于id的类,因此我可以绑定到正确的选择。 然后,我将您的事件绑定放入一个函数中:
function bindEvents() {
$(".select1").change(function() {
if($(this).data('options') == undefined){
/*Taking an array of all options-2 and kind of embedding it on the select1*/
$(this).data('options',$('#select2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('.select2').html(options);
});
}
然后在featherlight调用中,添加afterAfter:
$('a').featherlight({
targetAttr: 'href',
afterOpen: function () {
bindEvents();
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.