jquery 자식 클래스 선택 질문입니다.
본문
예를 들면 4개의 selectbox가 있습니다.
<select class="selBox A" name="A" id="A" ><option>...</option></select>
<select class="selBox A B" name="B" id="B" ><option>...</option></select>
<select class="selBox A B C" name="C" id="C" ><option>...</option></select>
<select class="selBox A B C D" name="D" id="D" ><option>...</option></select>
selectBox A의 체인지 이벤트를 주면
셀렉트박스 b.c.d의 <option /> 값이 다 삭제되게 하는 제이쿼리를 구현 중입니다.
아래처럼 하려고 했는데
$(".selBox A").children().find('option').remove();
.children()
.next() 등을 시도해보았습니다.
제가 하고 싶은 것은
class의 selBox A를 선택$(".selBox A")해서
자식 selBox A , selBox A B , selBox A B C. selBox A B C D 의 <option />를 삭제 하고 싶습니다.
this.className함수를 이용해
selBox A를 이름을 변수로 받아오는 것까지 성공했는데
selBox A의 className을 가지고
selBox A의 자식 클래스(selBox A B)의 className을 어떻게 하면 가져 올수 있을까요?
제가 설명이 서툴러 질문 전달이 잘 되었는지 모르겠습니다.
요점은
셀렉터 $(".selBox A")를 사용해서 셀렉터의 자식들 $(".selBox A B")를 어떻게하면 이벤트를 줄수 있는지 질문입니다.
하루 고민하고 구글링 해봐도 답을 찾지 못했습니다.
선배님들의 현답을 부탁드립니다.
미리 감사드립니다.
답변 8
<script type="text/javascript">
$(function() {
$("select.selBox.A").on("change", function() {
$("select[class*='selBox A']:not('#A') option").remove();
});
});
</script>
http://nyaongii.dothome.co.kr/temp/wrid_175501.html
이런 걸 원하시는 건가요?
질문 내용을 정확하게 이해하기 어렵네요.
$(".selBox").eq(0);
$(".selBox").eq(1);
$(".selBox").eq(2);
$(".selBox").eq(3);
or
$("select").eq(0);
$("select").eq(1);
$("select").eq(2);
$("select").eq(3);
$('.ClassA:not([name=A])').find("option").remove();
이미 동적인 셀렉트를 만들어 놓았습니다만
중복되는 소스를 줄이고 싶습니다.
Class A 의 옵션 값을 변경했을 때 select 2번째, 3번째, 4번째를 삭제하는 것을 분개해서
각 조건마다 아래의 소스가 들어갑니다.
$("select[name=B]").find("option").remove();
$("select[name=C]").find("option").remove();
$("select[name=D]").find("option").remove();
이렇게 3줄로 사용하는것을 아래처럼 구현하고 싶은데
$(this.className).children().find('option').each(function () {
$(this).remove();
}
$(".Class A").children()을 통해서
아래의 3개를 컨트롤 하고 싶은것이 질문의 요점입니다.
<select class="Class A B" /> id name 생략
<select class="Class A B C" />
<select class="Class A B C D" />
제가 설명이 부족했나 봅니다. 죄송합니다
1번 셀렉트 박스가 변경될 경우 2,3,4 셀렉트박스의 option 삭제
2번 셀렉트 박스가 변경될 경우 3,4 셀렉트박스의 option 삭제
3번 셀렉트 박스가 변경될 경우 4 셀렉트박스의 otpion 삭제
이런 기능을 swicth case 로 분개 하여 구현하였습니다.
완성 하고 보니 규칙된 것들이 반복되는것이 보여서
스위치케이스 문을
클래스네임을 변수로 받아서 선택된 클래스의 자식들을 한번에 지우는
아래의 3줄처럼 변경할수 없을까 하는
의문에서 질문을 남기게 되었습니다.
className.find('option').each(function(){
$(this).remove();
});
제가 기초가 없어 설명드리기 어려운 부분도 있었고
평소 설명하는 훈련이 되어 있지 않아 질문이 부족한 점도 있었습니다.
하지만 많은 선배님들이 관심갖아 주시고 도와주셔서 많은 도움 되었습니다.
감사합니다.
좋은 주말 보내세요
$(function() {
$("select[class^='selBox']").on("change", function() {
$("select[class*='" + $(this).attr("class") + "']:not('#" + $(this).attr("id") + "') option").remove();
});
});
http://nyaongii.dothome.co.kr/temp/wrid_175501.html
처음부터 질문을 이렇게 남기셨으면 저 포함 다른 분들이 좀 더 빨리 답변을 했을 것 같네요.
확인해 보세요.
제가 질문이 부족하고, 서툴렀습니다.
제가 원하던 기능이 맞습니다.
코드량이 훨씬줄어들어서 좋습니다.
추가적으로 궁금한것이 생겼습니다.
혹시 class명 없이 name으로도 가능할까요?
감사드립니다.
좋은 주말 되세요
html, css, js는 현재 코딩된 코드를 봐야 답이 가능합니다.
이게 조금만 틀어져도 결과가 다를 수가 있거든요.
그리고 지금 올려 주신 저 예에서 이름으로 할 경우엔 조금 달라집니다.
특히나 이름의 경우는 딱 하나만 들어가기에 코딩된 게 나와야 답을 할 수가 있겠네요.
