Javascript 如何在更改选择列表值时附加和删除html代码段

我目前正试图使用Jquery根据下拉列表的值附加一个音频标签html列表。主要问题是，当选择值更改时，empty（）和append（）方法根本没有将html注入playlist div

HTML初始状态：

  <select name="querySong" id="currentPlaylist">

            <option value="playlist1">playlist 1</option>
            <option value="playlist2">playlist 2</option>
            <option value="playlist3">playlist 3</option>
  </select>
  <div class="playlist">

  </div>

播放列表1
播放列表2
播放列表3

更改选择值后的HTML（所需输出）：

播放列表1
播放列表2
播放列表3
歌曲1

歌曲2

当前正在使用的Jquery：

$(document).on('change','#currentPlaylist',  function(e){
    // e.preventDefault();
    if($(this).find("option:selected").attr('value') == "song1") {

    // now load correct Playlist

    var playlist1 = [
           '<p> song 1',
           ' <audio  controls>',
           ' <source  src="music/song1.mp3" type="audio/mpeg">',
            '</audio>',               
            '</p>',     
           '<p> song 2',
            '<audio  controls>',
            '<source  src="music/song2.mp3" type="audio/mpeg">',
            '</audio>',
            '</p>',    
    ].join("\n");

    $(".playlist").empty().append(playlist1);
    }
    else if (
      ... continued logic for other select values

    });

$（文档）.on（'change'，'currentPlaylist'，函数（e）{
//e.预防违约（）；
if（$（this）.find（“选项：选中”）.attr（'value'）==“song1”）{
//现在加载正确的播放列表
变量1=[
“歌曲1”，
' ',
' ',
'',               
“
”，
“歌曲2”，
'',
'',
'',
“
”，
].加入（“\n”）；
$（“.playlist”）.empty（）.append（playlist1）；
}
否则如果(
…其他选择值的连续逻辑
});

“song1”不需要您的

#currentPlaylist

选择的选项值

我改变了，看起来你的代码运行得很好

$（文档）.on（'change'，'currentPlaylist'，函数（e）{
//e.预防违约（）；
if（$（this）.find（“选项：选中”）.attr（'value'）==“playli2”）{
//现在加载正确的播放列表
变量1=[
“歌曲2.1”，
' ',
' ',
'',               
“
”，
‘宋2.2’，
'',
'',
'',
“
”，
].加入（“\n”）；
$（“.playlist”）.empty（）.append（playlist1）；
}
})；

播放列表1
播放列表2
播放列表3
歌曲1

歌曲2

console中有错误吗？否则代码看起来很好？目前控制台上没有错误，也没有视觉响应。select CHANGE后div仍然为空。id为

currentPlaylist的select元素没有
song1
值。顺便说一句，行
if（$（this）.find（“option:selected”）.attr（'value'）==“song1”）{
可以缩短为
if（this.value==“some value”）{
$(document).on('change','#currentPlaylist',  function(e){
    // e.preventDefault();
    if($(this).find("option:selected").attr('value') == "song1") {

    // now load correct Playlist

    var playlist1 = [
           '<p> song 1',
           ' <audio  controls>',
           ' <source  src="music/song1.mp3" type="audio/mpeg">',
            '</audio>',               
            '</p>',     
           '<p> song 2',
            '<audio  controls>',
            '<source  src="music/song2.mp3" type="audio/mpeg">',
            '</audio>',
            '</p>',    
    ].join("\n");

    $(".playlist").empty().append(playlist1);
    }
    else if (
      ... continued logic for other select values

    });