Lightbox杀死javascript表单选项

所以我使用的表单有一个棘手的问题。因此，它被放置在一个工作良好的灯箱中。问题是有一个选项可以根据您之前选择的内容切换后续选项

这在灯箱外部工作，但在窗体内的灯箱中失败

我用这个例子：

因此，我首先在标题中加载这个：

<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>

果
动物
鸟
汽车
香蕉
苹果
橙色
狼
福克斯
熊
鹰
鹰派
BWM

这两个脚本位于页面底部：

<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>

$（“#选择1”）.change（函数（）{
if（$（this）.data（'options'）==未定义）{
/*获取一个包含所有选项的数组-2并将其嵌入select1*/
$（this）.data（'options'，$（'#select2 option'）.clone（）；
} 
var id=$（this.val（）；
var options=$（this.data（'options'）.filter（'[value='+id+']）；
$（'#select2'）.html（选项）；
});

我对您使用的lightbox库不是非常熟悉。我不太明白如何隐藏原始div并保持覆盖内容显示。这很奇怪，因为它复制了元素，所以发生的事情是绑定到原始元素，但是创建的新元素没有

更新了小提琴，但代码如下：

<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>

然后在featherlight调用中，添加afterOpen：

$('a').featherlight({
    targetAttr: 'href',
    afterOpen: function () {
      bindEvents();
    }
});

---

没人能帮忙吗？我真的很挣扎…我不确定问题出在哪里，或者你想在这里实现什么。小提琴也没有让我更容易理解。请您再详细说明一下好吗？提示：$（“#select1”）.change（function（），加载到lightbox时失败。您需要通过将.change更改为.on（）来使用.on（）（或.live（）和早期版本的jquery）这真的有效吗？他正在使用的脚本在lightbox外部工作，但在lightbox内部不工作？我没有修复下拉代码，因为这不是最初的问题：）最初的问题是更改没有成功；我不能在灯箱里工作。但你在哪里解决了这个问题？

$('a').featherlight({
    targetAttr: 'href',
    afterOpen: function () {
      bindEvents();
    }
});