Question

所以我对使用的表单有一个棘手的问题。所以它放在一个工作正常的灯箱内。问题是有一个选项可以根据您之前选择的内容切换后面的选项。

这在Lightbox之外工作，但在表单内的Lightbox中失败。

我正在使用此示例：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>

Answer 1

我对你正在使用的灯箱库并不是很熟悉。我无法弄清楚如何隐藏原始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>

更改为ids上的类，因此我可以绑定到正确的选择。然后我把你的事件绑定到一个函数中：

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调用中，添加一个afterOpen：

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

Lightbox杀死javascript表单选项

1 个答案: