jQuery two dropdown menus? (dynamically)

jQuery two dropdown menus? (dynamically)

HTML

<select id="mainSelect">
        <option value="option1">option 1</option>
        <option value="option2">option 2</option>
        <option value="option3">option 3</option>
    </select>
    <select id="subSelect">
        <option value="option5" data-option="option1option8">option 5</option>
        <option value="option8" data-option="option3">option 8</option>
        <option value="option9" data-option="option2">option 9</option>
    </select>

 <select name="">
        <option value="{'num_sequence':[0,1,2,3]}">Option one</option>
        <option value="{'foo':'bar','one':'two'}">Option two</option>
    </select>

JavaScript

$(document).ready(function () {
            $('#mainSelect').live('change', function () {
                $('#subSelect option').hide();
                $('#subSelect option[data-option="' + $(this).val() + '"]').show();
                $('#subSelect option:visible:first').attr('selected', true);
            });

            $('#mainSelect').trigger('change');
        });