제이쿼리 동적 셀렉트 박스 제어하기(주소 선택에 유용)
페이지 정보
작성자 오원장쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 0건 조회 5,591회 작성일 12-04-24 15:58본문
JQUERY PLUGIN(플러그인)
jquery는 jquery 자체로도 막강한 힘을 가지고 있어나 플러그인으로 더욱 막강하다
프러그인의 사용법은 간단하다.
필요한 플러그인을 다운 받은 후 공개된 플러그인 사이트에서 제공되는 설명되로만 하면된다.
플러그인 관련 참조사이트 : http://plugins.jquery.com/
<script language=javascript src="./js/jquery-1.3.2.js"></script>
<script language=javascript src="./js/jquery.plugin.sample.js"></script><!-- 필요에 따라 다운받은 플러그인 샘플
그리고 나서 걍 설명서 대로 처리하면된다.
아래는 실렉트 박스관련 플러그인 하나를 샘플로 올린다.
이것은 xml 파싱후 실렉트 버튼을 동적으로 변경하는 샘플이다.
공개판 위즈몰의 상품관리에 탑재될 예정이다.
<script language=javascript src="./js/jquery-1.3.2.js"></script>
<script language=javascript src="./js/selectboxes.js"></script>
<!-- selectboxes.js 라는 플러그인을 사용했다. Demo/다운로드 : http://www.texotela.co.uk/code/jquery/select/ -->
# 이것을 이용해서 약간 응용을 해보았다.
<script>
<!--
function getCategory(v, step) {
if(step == 1) $("#Category2").removeOption(/./);
else if(step == 2) $("#Category3").removeOption(/./);
$.ajax({
type: "GET",
url: "./product/search_category.php",
data: "value="+v.value+"&step="+step,//특정변수값을 주어서 결과를 받을때
dataType: "xml",
success: function(xml) {
$(xml).find('channel').each(function(){
var cat_no = $(this).find('cat_no').text();
var cat_name = $(this).find('cat_name').text();
if(step == 1) $("#Category2").addOption(cat_no, cat_name, false);
else if(step == 2) $("#Category3").addOption(cat_no, cat_name, false);
}); //close each(
}//close function(xml)
}); //close $.ajax(
} //close $(
//-->
</script>
<select name="Category1" id="Category1" onchange="getCategory(this, 1);">
<option value="" selected>대분류 </option>
<option value="">----------------</option>
</select>
<select name="Category2" id="Category2" onchange="getCategory(this, 2);">
<option value="" selected>중분류</option>
<option value="">----------------</option>
</select>
<select name="Category3" id="Category3">
<option value="" selected>소분류</option>
<option value="">----------------</option>
</select>
# 상기에서는 search_category.php에 접속하여 특정값을 주고
# xml 데이타를 받는 것인데
# 그 xml 데이타 는 아래와 같다.
<?xml version="1.0" encoding="utf-8" ?>
<rss version="2.0">
<channel>
<cat_no>001004</cat_no>
<cat_name>c1</cat_name>
</channel>
<channel>
<cat_no>002004</cat_no>
<cat_name>c2</cat_name>
</channel>
<channel>
<cat_no>003004</cat_no>
<cat_name>c3</cat_name>
</channel>
<channel>
<cat_no>004004</cat_no>
<cat_name>c4</cat_name>
</channel>
<channel>
<cat_no>005004</cat_no>
<cat_name>c5</cat_name>
</channel>
</rss>
추가 참조로 jquery만 사용해서 select 박스에 값을 넣거나 값을 가져오는 방식입니다.
select box의 내용 가져오기
$("#select_box > option:selected").val();
select box의 값 설정
$("#select_box > option[value=지정값]").attr("selected", "true")
특정 value 값을 가진 실렉트 박스의 text 값 가져오기
$('#select_box > option[value='+selValue+']').text();
jquery는 jquery 자체로도 막강한 힘을 가지고 있어나 플러그인으로 더욱 막강하다
프러그인의 사용법은 간단하다.
필요한 플러그인을 다운 받은 후 공개된 플러그인 사이트에서 제공되는 설명되로만 하면된다.
플러그인 관련 참조사이트 : http://plugins.jquery.com/
<script language=javascript src="./js/jquery-1.3.2.js"></script>
<script language=javascript src="./js/jquery.plugin.sample.js"></script><!-- 필요에 따라 다운받은 플러그인 샘플
그리고 나서 걍 설명서 대로 처리하면된다.
아래는 실렉트 박스관련 플러그인 하나를 샘플로 올린다.
이것은 xml 파싱후 실렉트 버튼을 동적으로 변경하는 샘플이다.
공개판 위즈몰의 상품관리에 탑재될 예정이다.
<script language=javascript src="./js/jquery-1.3.2.js"></script>
<script language=javascript src="./js/selectboxes.js"></script>
<!-- selectboxes.js 라는 플러그인을 사용했다. Demo/다운로드 : http://www.texotela.co.uk/code/jquery/select/ -->
# 이것을 이용해서 약간 응용을 해보았다.
<script>
<!--
function getCategory(v, step) {
if(step == 1) $("#Category2").removeOption(/./);
else if(step == 2) $("#Category3").removeOption(/./);
$.ajax({
type: "GET",
url: "./product/search_category.php",
data: "value="+v.value+"&step="+step,//특정변수값을 주어서 결과를 받을때
dataType: "xml",
success: function(xml) {
$(xml).find('channel').each(function(){
var cat_no = $(this).find('cat_no').text();
var cat_name = $(this).find('cat_name').text();
if(step == 1) $("#Category2").addOption(cat_no, cat_name, false);
else if(step == 2) $("#Category3").addOption(cat_no, cat_name, false);
}); //close each(
}//close function(xml)
}); //close $.ajax(
} //close $(
//-->
</script>
<select name="Category1" id="Category1" onchange="getCategory(this, 1);">
<option value="" selected>대분류 </option>
<option value="">----------------</option>
</select>
<select name="Category2" id="Category2" onchange="getCategory(this, 2);">
<option value="" selected>중분류</option>
<option value="">----------------</option>
</select>
<select name="Category3" id="Category3">
<option value="" selected>소분류</option>
<option value="">----------------</option>
</select>
# 상기에서는 search_category.php에 접속하여 특정값을 주고
# xml 데이타를 받는 것인데
# 그 xml 데이타 는 아래와 같다.
<?xml version="1.0" encoding="utf-8" ?>
<rss version="2.0">
<channel>
<cat_no>001004</cat_no>
<cat_name>c1</cat_name>
</channel>
<channel>
<cat_no>002004</cat_no>
<cat_name>c2</cat_name>
</channel>
<channel>
<cat_no>003004</cat_no>
<cat_name>c3</cat_name>
</channel>
<channel>
<cat_no>004004</cat_no>
<cat_name>c4</cat_name>
</channel>
<channel>
<cat_no>005004</cat_no>
<cat_name>c5</cat_name>
</channel>
</rss>
추가 참조로 jquery만 사용해서 select 박스에 값을 넣거나 값을 가져오는 방식입니다.
select box의 내용 가져오기
$("#select_box > option:selected").val();
select box의 값 설정
$("#select_box > option[value=지정값]").attr("selected", "true")
특정 value 값을 가진 실렉트 박스의 text 값 가져오기
$('#select_box > option[value='+selValue+']').text();
댓글목록
등록된 댓글이 없습니다.