selectbox 제어 질문 잇습니다!!
본문
안녕하세요~ 점심 식사들은 맛있게 하셨나요...
selectbox 제어에 관해 질문이 있어 이렇게 글을 남깁니다..
지금 selectbox가 2개 있습니다.
<select name="first">
<option value="1">1번</option>
<option value="2">2번</option>
<option value="3">3번</option>
<option value="4">4번</option>
<option value="5">5번</option>
<select>
<select name="second">
<option value="1">1번</option>
<option value="2">2번</option>
<option value="3">3번</option>
<option value="4">4번</option>
<option value="5">5번</option>
<select>
이런식으로 되어있는데 name값이 first 인 selectbox 에서 1번을 선택하면
name 값이 second인 selectbox 에서는 1번을 제외하고 2/3/4/5번만 뜨게 하고싶습니다ㅠㅠ
어떻게 해야할까요...??
고수님들의 조언 기다리고있겠습니다ㅠ_ㅠ
답변 2
이렇게 해보면 어때요
https://jsfiddle.net/#&togetherjs=epmbbqqj5s
//html
<select name="first">
<option value="1">1번</option>
<option value="2">2번</option>
<option value="3">3번</option>
<option value="4">4번</option>
<option value="5">5번</option>
<select>
<select name="second">
<option value="1" style="display:none">1번</option>
<option value="2" selected>2번</option>
<option value="3">3번</option>
<option value="4">4번</option>
<option value="5">5번</option>
<select>
//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]
찰스님 답변감사드립니다ㅠㅠ 그럼 2번 선택했을때 2번도 제외하여 1/3/4/5번이 뜨게 하려면
if(first_val == "1" || first_val == "2){ } 이렇게 하면될까요..?
ajax로 하시는게 좋을 듯 합니다.
<select name="first" id="first">, <select name="second" id="second"> 이렇게 id값을 주시고요.
first 값이 변경시(changed)에 ajax로 값을 넘겨서, second이 값의 option 값을 변경해주는겁니다.
말은 쉽죠 ^^.
다시 정리하면, 첫번째 select값의 변경시 그값을 가지고 ajax로 조정한 후에, 두번째 select의 option값을 변경해주는 겁니다.
저는 첫번째값에 따라서 두번째값이 변경되는 경우에 많이 사용하는데요.
첫번째에 서울을 선택하면 두번째에 서울의 구청들이 나오게 하는씩으로 사용합니다.
빨간망토의비밀님 답변 감사드립니다ㅠㅠ 참고해서 한번 해보겠습니다
