来自其他表单元素的切换元素（jquery）

Question

我有两个表单元素：复选框和下拉列表。复选框值通过id链接到下拉列表（选项id =复选框val）默认情况下，选项列表应隐藏。选中复选框后，我想显示列表中的特定选项。不幸的是，它没有正常工作。 我的代码：

<input type="checkbox" name="newsletter" value="Hourly">Hourly
<input  type="checkbox" name="newsletter" value="Daily">Daily
<input type="checkbox" name="newsletter" value="Weekly">Weekly
<input type="checkbox" name="newsletter" value="Monthly">Monthly
<input  type="checkbox" name="newsletter" value="Yearly">Yearly
<br>
<select  multiple="multiple">
  <option  id="Hourly">Hourly</option>
  <option id="Weekly">Weekly</option>
  <option id="Daily">Daily</option>
  <option id="Monthly">Monthly</option>
  <option id="Yearly">Yearly</option>
</select>
<div></div>
<script>
  $( "input[type='checkbox']"  ).change(function () {
    var str = "";
    $( $( "input:checked" ) ).each(function() {
      str = $( this ).val();
    });
    $( "option[id=" + str + "]" ).toggle();
  })
  .change();
</script>

有什么想法要改进吗？