jQuery select에서 값을 가져온 다음 div의 CSS를 변경하십시오.

Question

저는이 예제를 사용하려고했지만 저의 삶을 위해 작동시키지 못했습니다. Change background of Div from select

모든 입력
나를 움직이고 얻을 매우 이해할 수있을 것이다 도움

<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.

또는 각 option 요소의 value 속성에 파일 이름을 저장할 수 단순히 $(this).val()에 backgroundImage을 할당합니다.

또한 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>