소스가 작동하지 않아요
본문
<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>
이런 소스가 있습니다. 셀렉트 박스 3단 마지막에 클래스를 부여하고 그걸 클릭하면 처음에 보여지는 이미지가 그 value값의 이미지 url로 바뀌는건데요 동작을 안하네요 ㅠㅠ
답변 3
자바스크립트와 제이쿼리가 좀 섞여있네요 ^^; 통일성이 좋긴한데...
일단 당장 해결을 하는게 우선이겟죠..
f.select_3[k].className = 'imglink';
이부분... option값에 class를 주기보다 selectbox에 class를 줘야하겠으니..
f.select_3.className = 'imglink';
로 바꾸시면 되겠구요.
$(".imglink").click(function() {
이부분은 클릭했을때이므로... 선택한 option의 밸류값을 불러올 수 없으니
selectbox의 체인지 이벤트가 이루어 졌을때로 바꾸는게 좋을꺼 같으니
$("select[name=select_3]").bind("change", function () {
로 바꾸시구요.
그 아래 var image_url = $(this).attr("value"); 이부분도
선택한 option값의 밸류를 불러와야 하는것이므로..
var image_url = $("select[name=select_3] option:selected").val();
이렇게 바꿔주시면 정상 작동할꺼 같아보입니다.
답변너무 감사합니나 ㅜㅜ 복받으실거에요
근데 궁금한게 지금 option마다 value 값이 달라야하거든요? 근데 select에다 클래스를 줘도 되나요?
현재는 하나에만 넣어놓고 테스트중이라 하나만 들어가 있어요
3번째 셀렉트 박스에 많은 옵션이 들어가고 거기에 벨류가 다 달라요 ㅜㅜ
제가 몰라서 여쭤보는거니 언짢게 생각말아주세요 진짜 일자무식이라서요
하나만 더 여쭤보면 저 바디에 붙어있는것 때문인지 그냥 일반 페이지에 넣으면 안되더라구요 저 바디에 붙은거 없이 일반적인 스크립트처럼 하려면 어떻게 해야하나요?
밸류가 달라도 선택한 option값의 밸류를 불러와야하는거이므로 적어드린데로 하시는게 맞구요.
저렇게 하면 밸류가 몇개든... 그 셀렉트박스가 체인지 이벤트가 일어났을때 해당 셀렉트된 option의 밸류값을 불러오게 되어있습니다.
안그래도body에 너어두셨길래 말씀드릴려고 했었는데요.
여러가지 방법이 있겠지만 현재소스에서 최소한의 수정으로 해결할 방법으로 알려드리자면..
onLoad="initf(document.f)" 이부분은 지우시구요.
<script> 다음줄에
var f = document.f; 추가하시구요.
$(document).ready(function(){ 다음줄에
initf(f);
를 추가하시면 되겠습니다.
와 진짜 감사합니다 감사합니다
제가 퇴근해서 지금 당장은 못해 보지만
내일 꼭 해보겠습니다
도움 주셔서 너무 감사합니다
정말 행복하시고 복 많이 받으세요 감사합니다 ㅜㅜ
안녕하세요 ㅠㅠ 오늘 해봤는데 안되네요 절망 ㅠㅠ
일단 바디에 onload 부분은 안돼서 일단 적용 보류 해놨구요
<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.className = 'imglink';
}
f.select_3.selectedIndex = 0;
}
$(document).ready(function(){
$("select[name=select_3]").bind("change", function () {
var image_url = $("select[name=select_3] option:selected").val();
$('#disp_img').attr('src', image_url);
});
});
</script>
</BODY>
</HTML>
이렇게 해봤는데 이미지가 바뀌지 않아요 ㅠㅠ
head나 상단에 jquery를 로드해주세요.
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
아 제이쿼리가 없어서 안됐던건가요 ㅠㅠ 감사합니다 ㅠㅠ
