put text to div with dropdown option

I have the following code and its not working. I want to put the selected text to my selected-locations div. Any ideas? Thanks!

    <select name='available_locations' class='select-location'>
        <option value='Germany'>Germany</option>
        <option value='Venice'>Venice</option>
        <option value='Spain'>Spain</option>
    </select>

    <div id='selected-locations'>

    </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type='text/javascript'>
    $(document).ready(function() {

        $('.select-location').change(function(){

                        var location = $( this ).attr( 'value' );
                        alert( location );
                        //new_text = $('#selected-locations').val() + location;
                        $('div.selected-开发者_运维问答locations').text( location );


        });

    });

</script>

You need to read up on css selectors and jQuery selectors

$('div.selected-locations').text( location );

should be

$('div#selected-locations').text( location );

OR

<div id='selected-locations'>

</div>

shoould be

<div class='selected-locations'>

</div>

You can do this

$('.select-location').change(function(){
    var location = $('.select-location option:selected').val();
    $('div#selected-locations').text(location);
});

Working example: http://jsfiddle.net/jasongennaro/F3A62/

A few things needed to change with your code:

1. change $('div.selected-locations') to $('div#selected-locations') ... period to hash
2. use the option:selected
3. use the val()

use
$('#selected-locations').text(location ); You need to use # as selected-locations is a id not a css class.