Question

我正在使用名为featherlight的灯箱。我在该灯箱内有一个表单，需要动态选择选项来更改下一个问题选择框的内容。

选择框在灯箱外部工作但在其内部失败。

任何我认为出错的想法？

<select>
  <option value="111">111</option>
  <option value="222">222</option>
</select>


<select>
  <option value="111">111</option>
  <option value="222">222</option>
</select>


<script type="text/javascript">
    $(function(){
        $('select').change(function(){ // when one changes
            $('select').val( $(this).val() ) // they all change
        })
    })
    </script>

Answer 1

您的HTML最有可能在绑定处理程序后添加 - 您可以使用.on来解决此问题：

$(document).on("change", "select", function() { 
    $('select').val( this.value ) 
});

您应该将document替换为页面加载时存在的容器并包含您的动态内容 - 否则每次更改document时都会触发此事件（并检查是否实际上已更改select）

有一个共同的类：

<select class="common">
    <option value="111">111</option>
    <option value="222">222</option>
</select>


<select class="common">
    <option value="111">111</option>
    <option value="222">222</option>
</select>

$(document).on("change", "select.common", function() { 
    $("select.common").not(this).val( this.value ) //added .not(this) since we dont need to change the value of the select being interacted with
});

Answer 2

具有以下选项的唯一ID：

<select id='select1'>
  <option value="111">111</option>
  <option value="222">222</option>
</select>


<select id='select2'>
  <option value="111">111</option>
  <option value="222">222</option>
</select>


<script type="text/javascript">
    $(function(){
        $('#select1').change(function(){ // when one changes
            $('#select2').val( $(this).val() ) // they all change
        })
    })
    </script>

<强>更新

我猜你是从子窗口访问父元素

尝试以下

window.parent.$(#select2.val( $(this).val());

选项选择以动态更改下一个选择

2 个答案: