jquery show所選下拉值

Question

左邊部分是下拉式選擇不同的音樂。在右側顯示音樂名稱。該代碼只能顯示第一個。當我選擇另一首音樂時，它不能更改爲當前值。

HTML：

<div class="form-group"> 
     <label class="col-sm-2 control-label">Music</label> 
     <div class="col-sm-5"> 
     <select class="form-control" name="music" id="selectedmusic"> 
      <option value="buddy">Buddy</option> 
      <option value="cute">Cute</option> 
     </select> 
     </div> 
     <div class="col-sm-5" id="mp3play"> 
     </div> 
</div> 

的jQuery：

$(document).ready(function(){ 
    var music = $('#selectedmusic option:selected').text(); 
    $("#mp3play").html(music); 
    }); 

Answer 1

試一下：

$(document).ready(function(){ 
    $('#selectedmusic').change(function(){ 
     $("#mp3play").text(this.value); 
    }); 
}); 

你必須告訴javascript來觀看這個選擇框的值的變化。否則它只會在身體準備好時觀看一次，但當你改變它時不會更新，因爲你沒有說它應該。

Answer 2

$(document).ready(function(){ 
    $('#selectedmusic').change(function){ 
    var music = $('#selectedmusic option:selected').text(); 
    $("#mp3play").html(music); 
    }); 
});