Show/hide element (of option list) from other form element

Show/hide element (of option list) from other form element

I have two form's elements: checkboxes and drop-down list. Checkbox value is link with drop-down list by id (option id=checkbox val) The option list should be hide by default. After checkbox is checked I want to show specific options from the list. Unfortunately it doesn;t work properly. My code: 

  1. <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>
Any ideas what to improve?