javascript DOM을 jquery 로 바꾸는것좀 도와주세요
본문
3차이상 select 를 만들고 있는데
그나마 배열로 괜찮은 소스가 javascript DOM 이라고 합니다.
function change_sel_first(form) {
var i = form.sel_first.selectedIndex; // 1번째 셀렉스
form.sel_second.length = category[i].length;
for (j = 0; j < form.sel_second.length; j++)
form.sel_second[j].text = category[i][j].value;
form.sel_second.selectedIndex = 0;
}
현재 이 소스를
$(function() {
$(".sel_first").change(function(e) {
var row = $(this).closest('tr');
var target_first = row.find('.sel_first');
var target_second = row.find('.sel_second');
var i = $(this).closest('tr').find('.sel_first option:selected').index();
form.sel_second.length = category[i].length;
for (j = 0; j < form.sel_second.length; j++)
form.sel_second[j].text = category[i][j].value;
form.sel_second.selectedIndex = 0;
});
});
여기까지밖에 못했습니다.
tr로 여러줄에 select가 있어서 closest('tr')로 작업을 해야 하는데...
몇시간째 헤메고 있는데 답이 안나오네요 ㅠㅠ
답변 2
$(function() {
$(".sel_first").on('change', function() {
var i = $(this).find(':selected').index();
var sel2 = $(this).closest('tr').find('.sel_second');
var len = category[i].length;
for (j = 0; j < len; j++) {
sel2.append($('<option/>', {
value : category[i][j].value,
text : category[i][j].value
}));
}
//sel2.prop('selectedIndex', 0);
}
});
감사합니다.
$(function() {
$(".sel_first").on('change', function() {
var i = $(this).find(':selected').index();
var sel2 = $(this).closest('tr').find('.sel_second');
var len = category[i].length;
for (j = 0; j < len; j++) {
sel2.append($('<option/>', {
value : category[i][j].value,
text : category[i][j].value
}));
}
//sel2.prop('selectedIndex', 0);
});
});
이렇게 수정하니 잘 됩니다... 만
첫번째 select를 바꾸다보니 2번째 select가 계속 쌓입니다...
첫번째를 몇번 움직이면 2번째 select 값이 계속 중복으로 더해져서 나오는군요
$(function() {
$(".sel_first").on('change', function() {
var i = $(this).find(':selected').index();
var sel2 = $(this).closest('tr').find('.sel_second');
var len = category[i].length;
sel2.empty();
for (j = 0; j < len; j++) {
sel2.append($('<option/>', {
value : category[i][j].value,
text : category[i][j].value
}));
}
//sel2.prop('selectedIndex', 0);
}
});
https://www.google.com/search?q=javascript+cascade+select+using+ajax&oq=javascript+cascade+select
한번 참고해 보세요.
음... 이건 ajax인건가요? 음....
