Trouble using jQuery to get the option text for a select
===

What I am trying to do is replicate a form interaction experience I have seen somewhere before... 

When you click on 'text' it becomes a text field for the user to edit the text.

label: text (click) label: input[text]. Then blah.change(){ submit };

    $('#basicinfo div').click(function(){
        $('#basicinfo select').hide();
        $('#basicinfo div').show();
        $(this).hide();
        $(this).siblings('select').show();
    });
    $('#basicinfo select').blur(function(){
        $('#basicinfo select').hide();
        $('#basicinfo div').show();
    });
    $('#basicinfo select').change(function(){
        $(this).siblings('div').html(***$(this).text()***);
        $('#basicinfo').submit();
    });

    <form id="basicinfo">
        <label>Gender</label> <div>Male</div>
        <select name="1">
            <option value="1">Male</option>
            <option value="2">Female</option>
        </select>
        <label>Age</label> <div>23years</div>
        <select name="2">
            <option value="21">21 years</option>
            <option value="22">22 years</option>
            <option value="23">23 years</option>
        </select>
    </form>

Using .val() or .text() haven't worked, hopefully someone will know what I need :)

PS. I tried $(this+" option:selected").text() but didn't work.