//JSON 配列 var mp3s = [ "https://raw.githubusercontent.com/tomoyamkung/javascript-sample/master/Underscorejs/template/mp3/c11.mp3", "https://raw.githubusercontent.com/tomoyamkung/javascript-sample/master/Underscorejs/template/mp3/d7.mp3", "https://raw.githubusercontent.com/tomoyamkung/javascript-sample/master/Underscorejs/template/mp3/d8.mp3" ]; $(function() { // Underscore.js の `template` メソッドを使って option タグを追加 var template = _.template($("#option_template").text()); var pulldown = $('#list'); _.each(mp3s, function(mp3) { var tag = template({filename: mp3}); pulldown.append(tag); }) // 選択された項目の mp3 を自動再生 pulldown.change(function() { var x = pulldown.find("option:selected").text(); $('#player').attr('src', x).attr('autoplay', 'autoplay'); }); });
<audio id="player" controls></audio><br/> <select id="list" > <option value="" /> </select> <!-- Underscore.js の template メソッドで使用する HTML のテンプレート --> <script type="text/template" id="option_template"> <option value="<%= filename %>"><%= filename %></option> </script> From:http://tomoyamkung.net/2014/02/23/javascript-underscore-template/