javascript - 选项选择动态更改下一个选择

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 很可能是在处理程序绑定(bind)后添加的 - 您可以使用 .on 来解决此问题:

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

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

使用公共(public)类:

<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
});