把文字分隔與下拉選項

Question

我有下面的代碼，它不工作。我想將選定的文本放到我選擇的位置div中。有任何想法嗎？謝謝！

<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> 

Answer 1

您需要在css selectors和jQuery selectors

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

閱讀起來應該是

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

OR

<div id='selected-locations'> 

</div> 

shoould是

<div class='selected-locations'> 

</div> 

Answer 2

你可以做到這一點

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

工作例如：http://jsfiddle.net/jasongennaro/F3A62/

需要與您的代碼來改變幾件事情：

1. 變化$('div.selected-locations')到$('div#selected-locations') ...期間哈希
2. 使用option:selected
3. 使用val()

Answer 3

使用
$（ '＃選擇-位置'）文本（位置）。 你需要使用＃作爲selected-locations是一個id而不是一個css類。