onchange select박스 문의.....
본문
<ul>
<li>
<select name="wr_1[]" class="sel_main main1" onchange="itemChange()">
<option value="">선택하세요</option>
<option value="A">A</option>
<option value="B">B</option>
</select>
<select name="wr_2[]" class="sel_sub sub2">
<option value="">선택하세요</option>
</select>
</li>
<li>
<select name="wr_1[]" class="sel_main main2" onchange="itemChange()">
<option value="">선택하세요</option>
<option value="A">A</option>
<option value="B">B</option>
</select>
<select name="wr_2[]" class="sel_sub sub2">
<option value="">선택하세요</option>
</select>
</li>
</ul>
<script>
function itemChange(){
var test1 = ["aa","bb","cc"];
var test2 = ["111","222","333"];
var test3 = ["yyy","zzz","kkk"];
var selectItem = $(".sel_main").val();
var changeItem;
if(selectItem == "아모르"){
changeItem = test1;
}
else if(selectItem == "레깅스"){
changeItem = test2;
}
else if(selectItem == "건강용품"){
changeItem = test3;
}
$('.sel_sub').empty();
for(var count = 0; count < changeItem.length; count++){
var option = $("<option>"+changeItem[count]+"</option>");
$('.sel_sub').append(option);
}
}
</script>
제품 추가 버튼을 눌러 li가 계속 추가되는 건데요... id값으로는 답이 없을거 같아서 class로 변경했습니다.
추가될때마다 클래스뒤에 값을 + 시켜서 추가로 값이 나오게는 했는데
각각 따로 변경할려면 어떻게 해야 할지 잘 모르겠습니다.
고수님들 도와주세요
답변 1
$(function() {
$(document).on('change', '[name="wr_1[]"]', function() {
var $this = $(this),
value = $this.val();
var test1 = ["aa","bb","cc"];
var test2 = ["111","222","333"];
var test3 = ["yyy","zzz","kkk"];
var changeItem = [];
if(value == '아모르') {
changeItem = test1;
}
if(value == '레깅스') {
changeItem = test2;
}
if(value == '건강용품') {
changeItem = test3;
}
$.each(changeItem, function(i, $i) {
var option = '<option>'+$i+'</option>';
$this.next('select').append(option);
});
});
});
테스트는 안해봤습니다.
아.. 희망이 보입니다.
첫번째 select 를 변경하면 다른 라인의 두번째 select의 값이 전부 사라져버리는군요 ㅠㅠ
