如何根据另一个的值更新选择框?

时间:2013-11-02 09:40:42

标签: javascript jquery

在我的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技能非常有限。

请帮帮我。非常感谢!

2 个答案:

答案 0 :(得分:5)

尝试

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

演示:Fiddle

答案 1 :(得分:0)

您可以使用依赖选择jquery插件来实现此目的:

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