Dynamic jPlayer

Question

I have been trying for a week to create a dynamic jplayer that changes depending on the selected option in selectbox. Other stack overflow messages were very helpful, so I hope I can figure it out. Any links to examples that other people made will also be appreciated. Related javascript below:

jQuery(document).ready(function($){ $(function() { var pinyinTone=null; var toneSelect=null; var pinyinSound=null; $("#jquery_jplayer").jPlayer({ ready: function () { }, swfPath: "/sites/all/libraries/jplayer/js", supplied: "mp3" }) $("#jquery_jplayer").jPlayer("setMedia", { mp3: '/sites/default/files/pinyinSound/' + pinyinTone + '.mp3', wav: '/sites/default/files/pinyinSound/' + pinyinTone + '.wav' }); }; $("select#pinyinSound").change(function(){ toneSelect=1; $('#toneSelectDiv').show(); pinyinSound=$(this).val(); $.ajax({ url: "/HBCAppFiles/get_list.php", data: { pinyinSound: $("select#pinyinSound").val() }, dataType:"json", success:function(j){ var options = ''; for (var i = 0; i < j.length; i++) { options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>'; } $("select#toneSelect").html(options); } }) pinyinTone=pinyinSound + toneSelect; processPinyinVars(pinyinTone); }); $("img#pinyinSliderPlayButton").click(function (){ $('#inner').animate({width: 250}, function(){ $(this).width(0)}); $("#jquery_jplayer").jPlayer("play"); return false; }); })(jQuery); 

Answer 1

I understood my problem ... I decided to solve my problem differently and came to a solution much faster. I realized that I needed to access the selected instruction element using jquery. To do this, I needed to use the find function. I came up with the following:

  $("#trackSelect").change(function(e) { my_trackName.text($(this).val()); my_jPlayer.jPlayer("setMedia", { mp3: $(this).find(':selected').attr("href") }); });