jquery - 根据选择更改背景图像

Question

我尝试在下拉（选择）选项更改时动态更改 div 的背景。我正在使用 data-bg 属性来指定应该使用的背景。但是我不知道如何从当前选择的选项中获取属性。

当前状态：http: //jsfiddle.net/7xYv3/

我的JavaScript：

     $('#game-list').change(function () {
         var selectValue = $("#game-list").val();
         var gameBackground = $(selectValue).attr("data-bg");
         changeBg(gameBackground);
     });

     //change the background color based on the data-bg attribute
     function changeBg(bg) {
         $(".welcome").css('background-image', 'url("' + bg + '")');
     }

另外，在一个完全不相关的注释上......关于我在哪里可以找到让图像只选择下拉菜单的信息的任何提示？我很想使用图标下拉列表而不是文本。

Answer 1

$('#game-list').change(function () {
    changeBg( $('option:selected', this).data('bg') );
});

这是你的小提琴：http: //jsfiddle.net/7xYv3/1/