selectbox 제어 질문 잇습니다!! 채택완료
안녕하세요~ 점심 식사들은 맛있게 하셨나요...
selectbox 제어에 관해 질문이 있어 이렇게 글을 남깁니다..
지금 selectbox가 2개 있습니다.
이런식으로 되어있는데 name값이 first 인 selectbox 에서 1번을 선택하면
name 값이 second인 selectbox 에서는 1번을 제외하고 2/3/4/5번만 뜨게 하고싶습니다ㅠㅠ
어떻게 해야할까요...??
고수님들의 조언 기다리고있겠습니다ㅠ_ㅠ
답변 2개
이렇게 해보면 어때요
https://jsfiddle.net/#&togetherjs=epmbbqqj5s">https://jsfiddle.net/#&togetherjs=epmbbqqj5s
//html
</span> </p><p><span style="font-size: 14.6667px; line-height: 22px;"><select name="first"></span></p><p><span style="font-size: 14.6667px; line-height: 22px;"> <option value="1">1번</option></span></p><p><span style="font-size: 14.6667px; line-height: 22px;"> <option value="2">2번</option></span></p><p><span style="font-size: 14.6667px; line-height: 22px;"> <option value="3">3번</option></span></p><p><span style="font-size: 14.6667px; line-height: 22px;"> <option value="4">4번</option></span></p><p><span style="font-size: 14.6667px; line-height: 22px;"> <option value="5">5번</option></span></p><p><span style="font-size: 14.6667px; line-height: 22px;"> <select></span></p><p><span style="font-size: 14.6667px; line-height: 22px;"> </span></p><p><span style="font-size: 14.6667px; line-height: 22px;"> <select name="second"></span></p><p><span style="font-size: 14.6667px; line-height: 22px;"> <option value="1" style="display:none">1번</option></span></p><p><span style="font-size: 14.6667px; line-height: 22px;"> <option value="2" selected>2번</option></span></p><p><span style="font-size: 14.6667px; line-height: 22px;"> <option value="3">3번</option></span></p><p><span style="font-size: 14.6667px; line-height: 22px;"> <option value="4">4번</option></span></p><p><span style="font-size: 14.6667px; line-height: 22px;"> <option value="5">5번</option></span></p><p> </p><p><span style="font-size: 14.6667px; line-height: 22px;"> <select></span></p><div>
</div><p><span style="font-size: 14.6667px;">
//script
[code]
$(document).ready(function() {
$("[name='first']").change(function() {
var first_val = $(this).val();
$("option", "[name='second']").show();
$("option", "[name='second']").attr("selected", false);
$("option[value='" + first_val + "']", "[name='second']").hide();
if (first_val == "1") {
$("option", "[name='second']").eq(1).prop("selected", true);
} else {
$("option", "[name='second']").eq(0).prop("selected", true);
}
});
});
[code]
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
ajax로 하시는게 좋을 듯 합니다.
first 값이 변경시(changed)에 ajax로 값을 넘겨서, second이 값의 option 값을 변경해주는겁니다.
말은 쉽죠 ^^.
다시 정리하면, 첫번째 select값의 변경시 그값을 가지고 ajax로 조정한 후에, 두번째 select의 option값을 변경해주는 겁니다.
저는 첫번째값에 따라서 두번째값이 변경되는 경우에 많이 사용하는데요.
첫번째에 서울을 선택하면 두번째에 서울의 구청들이 나오게 하는씩으로 사용합니다.
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
if(first_val == "1" || first_val == "2){ } 이렇게 하면될까요..?