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

jquery显示选中的下拉值

2 个答案: