javascript - 如何根据另一个值更新选择框？

Question

在我的 Rails 应用程序中，我有一个带有两个选择框的表单（其中一个是多选框）：

<label>Project owners</label>
<select multiple="multiple">
  <option value="1">Huey</option>
  <option value="2">Dewey</option>
  <option value="3">Louie</option>
</select>

<label>Invoice recipients</label>
<select>
  <option value="1">Huey</option>
  <option value="2">Dewey</option>
  <option value="3">Louie</option>
</select>

如何限制invoice recipients已project owners选择的？

例如，如果Dewey和Louie被选为project owners，则invoice recipients选择框也应该只包含Dewey和Louie。

我知道这可以通过 jQuery 实现，但我的 jQuery 技能非常有限。

请帮我。非常感谢！

Answer 1

尝试

<label>Project owners</label>
<select id="owners" multiple="multiple">
  <option value="1">Huey</option>
  <option value="2">Dewey</option>
  <option value="3">Louie</option>
</select>

<label>Invoice recipients</label>
<select id="recipients">
  <option value="1">Huey</option>
  <option value="2">Dewey</option>
  <option value="3">Louie</option>
</select>

然后

$('#owners').change(function(){
    $('#recipients').empty().append($(this).find('option:selected').clone())
})

演示：小提琴

Answer 2

为此，您可以使用依赖选择 jquery 插件：

http://simpleweb.github.io/jquery-dependent-selects/