웹프로그래밍

Global It Leader!!


jQuery


 
 

제이쿼리 동적 셀렉트 박스 제어하기(주소 선택에 유용)

페이지 정보

작성자 no_profile 오원장쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 0건 조회 5,614회 작성일 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();

댓글목록

등록된 댓글이 없습니다.

전체 148
게시물 검색
jQuery 목록
번호 제목 글쓴이 조회 날짜
68 no_profile 오원장쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3844 02-12
67 no_profile 오원장쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 4271 02-10
66 no_profile 오원장쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3780 02-08
65 no_profile 오원장쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3799 02-08
64 no_profile 오원장쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3781 01-31
63 no_profile 오원장쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 4690 01-03
62 no_profile 오원장쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 4177 11-29
61 no_profile 오원장쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 6854 09-17
60 no_profile 오원장쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 5709 08-21
59 no_profile 오원장쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 5014 08-21
58 no_profile 오원장쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 6533 07-13
57 no_profile 오원장쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 6099 06-13
56 no_profile 오원장쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 5464 04-28
열람중 no_profile 오원장쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 5615 04-24
54 no_profile 오원장쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 5007 04-24
53 no_profile 오원장쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 5911 04-24
52 no_profile 오원장쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 5008 04-24
51 no_profile 오원장쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 4493 04-20
50 no_profile 오원장쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 4142 04-19
49 no_profile 오원장쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 4494 04-19