Change visibility of forms depending on chosen option

Question

I'm making a research form which will display differently depending on the choice of a SELECT value. I have applied some jQuery tricks after searching through here. Unfortunately, it doesn't work at all. Here is my code:

HTML:

<select name="options" id="choice">
    <option value="0" selected="true">Choose...</option>
    <optgroup label='ABC'>
        <option value="1">...DEF</option>
        <option value="2">...GHL</option>
    </optgroup>
    <optgroup label="MNP:">
        <option value="3">X</option>
        <option value="4">Y</option>
        <option value="5">Z</option>
    </optgroup>
</select>
<form id="opt1" name="opt1" style="display: none">11111111</form>
<form id="opt2" name="opt2" style="display: none">22222222</form>
<form id="opt3" name="opt3" style="display: none">33333333</form>
<form id="opt4" name="opt4" style="display: none">44444444</form>
<form id="opt5" name="opt5" style="display: none">55555555</form>

JavaScript:

$("#choice").change(function() {
    $("form").hide();
    $("#opt" + $(this).val()).show();
});

Answer 1

Try this one

$(document).ready(function(){
 $('select').change(function() {
    //var selected = $(':selected', this);
    //alert(selected.closest('optgroup').attr('label'));
     $("form").hide();
    $("#opt" + $(this).val()).show();
});
});

DEMO here