How to get values from an asp.net control to a javascript in the web form

Good day. I have a dropdown list control called audioList. Whenever the page loads audioList is populated from a database. On the web form I have JPlayer which is a JQuery audio player. What I want to do is to load JPlayer with the value taken from audioList.

Here is the code for JPlayer on the web form:

<script type="text/javascript">
  $(document).ready(function () {
      $("#jquery_jplayer_1").jPlayer({
          ready: function () {
              $(this).jPlayer("setMedia", {
                  mp3: "" //<--This part links to the mp3's location
              });
          },
          swfPath: "/MediaPlayer/jQuery.jPlayer.2.0.0/",
          supplied: "mp3"
      });
  });
</script>

Here is the code where audioList is:

protected v开发者_StackOverflow社区oid Page_Load(object sender, EventArgs e)
    {

        string query = "SELECT Media_Directory FROM media";

        DataTable dt = MySQLHandler.pull(query);
        audioList.DataSource = dt;
        audioList.DataTextField = dt.Columns[0].ToString();
        audioList.DataValueField = dt.Columns[0].ToString(); //<--mp3 file location which is to be placed in JPlayer
        audioList.DataBind();

    }

You can call your jplayer function to play the mp3 onChange event of the drop down

see Fire event each time a DropDownList item is selected with jQuery

basically on the drop down selected add a jquery event that will set a property on the jplayer