JQuery получить значение из выбора, а затем изменить CSS див

Question

Я пытался использовать этот пример, но на всю жизнь я не могу заставить его работать.
Изменить фон Div от выбранного

Любой вклад, который поможет мне двигаться вперед, будет очень признателен

<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 = background.jpg
bg1 = background1.jpg
bg2 = background2.jpg

Answer 1

То, как вы хранили отображения, было не очень гибким.Я сохранил их как объект.

Если вы назвали их bg, bg2 и т. Д. И не охватили их, вам нужно было бы получить к ним доступ как window['bg' + i], что беспорядочно.

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 .

Кроме того, вы можете сохранить имя файла в атрибуте value каждого элемента option и просто присвоить backgroundImage$(this).val().

Также вы пытаетесь установить стили внутри элемента script.Это не сработает;то, что вы хотите, это style элемент.

Answer 2

Тест под кодом:

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

и измените свой выбор на:

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