jQuery erhalten Wert aus wählen dann ändern css eines div

Question

Ich habe versucht, dieses Beispiel zu verwenden, aber ich kann es beim besten Willen nicht zum Laufen bringen.
Hintergrund von Div aus wählen

Für jede Anregung, die mir weiterhilft, bin ich sehr dankbar.

<script>
#changemybg {
       background: url(images/default.jpg) no-repeat 50% 50%;
}
</scipt>

<div id="changemybg"></div>

<select name="change" id="backgrounds">
<option>bg</option>
<option>bg1</option>
<option>bg2></option>
</select>

bg = hintergrund.jpg
bg1 = hintergrund1.jpg
bg2 = hintergrund2.jpg

Answer 1

Die Art und Weise, wie Sie die Zuordnungen gespeichert haben, war nicht sehr flexibel. Ich habe sie als Objekt gespeichert.

Wenn Sie sie benennen bg , bg2 usw. und haben sie nicht in den Geltungsbereich aufgenommen, müssen Sie auf sie als window['bg' + i] was chaotisch ist.

var bg = {
  'bg': 'background.jpg',
  'bg1': 'background1.jpg',
  'bg2': 'background2.jpg' 
};

$('#backgrounds').change(function() {
   var background = $(this).find('option:selected').text();

   if ( ! background in bg) {
       return;
   } 

   $('#changemybg').css({
      'backgroundImage': 'url(' + bg[background] + ')'
   });
});

jsFiddle .

Alternativ können Sie den Dateinamen auch in der Datei value Attribut eines jeden option Element und weisen Sie einfach das backgroundImage a $(this).val() .

Außerdem versuchen Sie, die Stile innerhalb einer script Element. Das wird nicht funktionieren; was Sie wollen, ist ein style Element.

Answer 2

Test Below Code :

$("#backgrounds").change(function()
{
    var val = $(this).val();
    $("#changemybg").css("background-image",val);
});

und ändern Sie Ihre Auswahl in diese:

<select name="change" id="backgrounds">
<option value="background1.jpg">bg</option>
<option value="background2.jpg">bg1</option>
<option value="background3.jpg">bg2></option>
</select>