Question

I am try to change a div’s background dynamically anytime a dropdown’s (select) choice is changed. I’m using a data-bg attribute to specify the background which should be used. However I can’t figure out how to grab the attribute from the currently selected choice.

Current Status: http://jsfiddle.net/7xYv3/

My 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 + '")');
     }

Also, on a completely unrelated note… any tips on where I can find information for having an image only select dropdown? I would love to use a dropdown of icons instead of text.

Answer 1

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

Here’s your fiddle: http://jsfiddle.net/7xYv3/1/