옵션 선택에 따른 이미지 변경 소스가 작동을 하지 않아요
본문
옵션을 선택하고 그 선택한 value 값이 링크값이 되어 특정 ID의 이미지가 변경하는
없는 지식에 소스를 여러 곳에서 짜집기를 해서 만들었는데요
li 등으로 테스트하면 잘 나오는데 select option으로 하면 작동이 되지 않네요
option의 value값은 적용이 잘 되는 것으로 확인이 됩니다.
<BODY onLoad="initf(document.f)">
<img id="disp_img" src="https://sir.kr/img/main/logo2.png" alt="">
<form name='f'>
<select name="select_1" onchange="change_select_1(this.form)"></select>
<select name="select_2" onchange="change_select_2(this.form)"></select>
<select name="select_3"></select>
</form>
<script>
function Category(text, value) {
this.text = text;
this.value = value;
this.length = 0;
}
function addCategory(category, text, value) {
category[category.length] = new Category(text, value);
category.length++;
}
var category = new Category();
// 수정 하실 부분.
// 구현 방법 addCategory (뎁스,네임,값)
// <option value="값">네임</option>
addCategory(category, "1");
addCategory(category, "2");
addCategory(category, "3");
addCategory(category[0], "1-1");
addCategory(category[0], "1-2");
addCategory(category[1], "2-1");
addCategory(category[2], "3-1");
addCategory(category[0][0], "1-1-1","https://sir.kr/img/bn/request-link2.gif");
addCategory(category[0][0], "1-1-2");
addCategory(category[0][1], "1-2-1");
addCategory(category[0][1], "1-2-2");
addCategory(category[1][0], "2-2");
addCategory(category[2][0], "3-2");
function initf(f) {
f.select_1.length = category.length+1;
f.select_1[0].text = "-선택해주세요-";
for (i = 1; i < f.select_1.length; i++){
f.select_1[i].text = category[i-1].text;
if(category[i-1].value)
f.select_1[i].value = category[i-1].value;
}
f.select_1.selectedIndex = 0;
change_select_1(f);
}
function change_select_1(f) {
var i = f.select_1.selectedIndex;
f.select_2.length = (i ? category[i-1].length : 0)+1;
f.select_2[0].text = "-선택해주세요-";
for (j = 1; j < f.select_2.length; j++){
f.select_2[j].text = category[i-1][j-1].text;
if(category[i-1][j-1].value)
f.select_2[j].value = category[i-1][j-1].value;
}
f.select_2.selectedIndex = 0;
change_select_2(f);
}
function change_select_2(f) {
var i = f.select_1.selectedIndex;
var j = f.select_2.selectedIndex;
f.select_3.length = (i && j ? category[i-1][j-1].length : 0)+1;
f.select_3[0].text = "-선택해주세요-";
for (k = 1; k < f.select_3.length; k++){
f.select_3[k].text = category[i-1][j-1][k-1].text;
if(category[i-1][j-1][k-1].value)
f.select_3[k].value = category[i-1][j-1][k-1].value;
f.select_3[k].className = 'imglink';
}
f.select_3.selectedIndex = 0;
}
$(document).ready(function(){
$(".imglink").click(function() {
var image_url = $(this).attr("value");
$('#disp_img').attr('src', image_url);
});
});
</script>
</BODY>
</HTML>
이런 소스인데요
어떤 분께서
f.select_3[k].className = 'imglink'
-> f.select_3.className = 'imglink';
$(".imglink").click(function() {
-> $("select[name=select_3]").bind("change", function () {
var image_url = $(this).attr("value");
-> var image_url = $("select[name=select_3] option:selected").val();
로 변경해보라고 해서 변경을 해봤으나 역시 적용이 안되네요 ㅠㅠ
혹시 어떤 부분을 변경해야 정상적으로 작동을 할까요?
답변 1
으앗 이렇게 깔끔하게 되네요 완전 감사합니다 ㅠㅠ 로또 1등 되세요 너무 감사합니다
body 부분도 해결해주셨네요 onload 없이도 ㅠㅠ 완전 감사합니다
와 이거 제가 말은 안했지만 원하던 부분까지 모두모두 알려주셨어요 너무 감사해요
이미지 url이 있을 때 없을때까지 ;; 와 ㅠㅠ
의뢰는 아니지만 제가 뭐라도 보답하고 싶어서요 혹시 쪽지로 전화번호 주실 수 있으신가요?
더운 날 커피라도 드시게 커피 기프티콘이라도 보내드리고 싶네요 ㅠㅠ
도움이 되셨다니 저도 기쁘네요...
무더위에 건강조심하세요,,,
아 기프티콘은 좀 그런가요? ㅠㅠ
건강 조심하시고 하시는 일 대박 나세요~! 감사합니다
