根据选择选项更改显示哪个国家/地区的数据

时间:2016-12-09 06:17:11

标签: javascript jquery

我基本上从itunes rss feed中提取信息,以根据从select元素中选择的国家/地区显示热门歌曲。

我试图替换所选选项中的值并将其插入到RSS网址中以获得该国家的顶级歌曲。数据拉得很好但是即时通讯 值得注意的是选择任何其他选项。日本是唯一一个显示,除非我改变哪个选项是第一个。如何获得更改显示数据的选项?

// selects value for chosen country
var country;
//its selecting the value however its not refreshing. 
country = $("#country :selected").text();

$.get('https://itunes.apple.com/' + country + '/rss/topsongs/limit=3/xml', function(data) {
  var songArray = $(data).find('entry');
  songArray.each(function() {
    var title = $(this).find("title").text(); //grab song title
    var artist = $(this).find("im\\:artist, artist").text(); //grab                                                                          artist name
    var album = $(this).find("im\\:name,name").text(); //grab album name
    var image = $(this).find("im\\:image,image").eq(2).text(); //grab image link
    var audioLink = $(this).find("link").eq(1).attr("href"); //grab music file
    var audioDiv = $("source").attr("src", "audioLink"); //adds audio to source div
    audioLink = '"' + audioLink + '"'
      // youtube api to provide link to video based on the top                           songs populated
      // Set the search term
    var searchTerm = title;
    var link;
    var url = "https://www.googleapis.com/youtube/v3/search?q=" + searchTerm + "&part=snippet&maxResults=1&key=AIzaSyBvccDrp39n-InLrjDvv4PH_vfNbN0J_iE";

    $.getJSON(url, function(data) {
      var id = data.items[0].id.videoId;
      link = "https://www.youtube.com/watch?v=" + id;
      $("#song").append(
        " <br><br>Song :" + title + "<br> Artist :" + artist + " <br>album: " + album + "<br>" + "<img src=" + image + "> " + "<a href= " + link + ">" + link + "</a> <br>" + audioLink
      );
    });
  }, "xml");

});
<select name="country" id="country">
  <!--  <option>select song</option> -->
  <option value="japan">jp</option>
  <option value="spain">es</option>
  <option value="france">fr</option>

</select>
<input type="button" id="button" value="get songs">

3 个答案:

答案 0 :(得分:1)

您需要document.querySelectorAll('.sample').forEach(function(e) { e.parentNode.removeChild(e); }); value text选项

selected

或者,如果你想要 var country; //its selecting the value however its not refreshing. country= $("#country option:selected").text(); ,你可以这样做

value

答案 1 :(得分:1)

您可以使用更改活动

    <select name="country" id="country">
      <!--  <option>select song</option> -->
      <option value="japan">jp</option>
      <option value="spain">es</option>
      <option value="france">fr</option>

    </select>

    $('#country').on('change', function() {
      alert( this.value );
      $.get('https://itunes.apple.com/' + this.value + '/rss/topsongs/limit=3/xml'
    })

答案 2 :(得分:0)

您需要关注change事件

$( "#country" ).change(function() {
  country= $("#country").val();
  $.get(....
});