셀렉트 선택시 이미지가 바뀌는데요
본문
<script language="javascript">
function img_change()
{
var chimg = document.getElementById('one01').value;
document.all("change_img").innerHTML = "<img src='"+ chimg +"'>";
var val = $(this).val();
var chimg= "";
if (val == "1단명함꽂이")
chimg = "img/car3.jpg";
else if (val == "2단명함꽂이")
chimg = "img/car2.jpg";
else
chimg = "img/car.jpg";
chimg = '<img src="' + chimg + '">';
$('#change_img').html(chimg);
}
</script>
<select name="selectBox" id="one01" onChange="img_change(this);" >
<option value="1단명함꽂이">1단명함꽂이</option>
<option value="2단명함꽂이">2단명함꽂이</option>
<option value="img/car.jpg">나</option>
<option value="img/car2.jpg">센서그림</option>
<option value="img/car3.jpg">회사그림</option>
</select>
<div id = "change_img" align="center">여기서 내용이 바뀝니다.</div>
하다가 잘안되어서 도움을 요청함니다.
value 값은 유지하면서 선택하면 이미지가 바뀌는 건데요
아래 옵션 3개처럼 경로를 넣어서 하는건 잘 되는데...
위에 옵션 2개 처럼 value 값을 유지 하면서 선택시 바뀌게 하려 하니 잘안되네요....
답변 1
<script>
function img_change(f) {
var chimg = '<img src="' + $(f).find('option:selected').data('src') + '">';
$('#change_img').html(chimg);
}
</script>
<select name="selectBox" onChange="img_change(this);" >
<option value="1단명함꽂이" data-src="img/car.jpg">1단명함꽂이</option>
<option value="2단명함꽂이" data-src="img/car2.jpg">2단명함꽂이</option>
</select>
<div id = "change_img" align="center">여기서 내용이 바뀝니다.</div>
감사합니다 잘 되네요
