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); 
    }); 
});