jQuery SelectBox Option 값 초기화 및 수정 삭제

Open API/Jquery|2016. 10. 28. 09:16
반응형



jQuery 를 이용한 Select Box 값 초기화 및 수정 / 삭제 하는 기능 샘플 코드입니다.
  
//전부 삭제
 $("form[name='"+formId +  "'] select[name='"+objId+"'] option").remove();    
 
 
//하나 삭제
$('#ttt').children("[value='04']").remove();
 
 
//추가할때
$('#ttt').append('<option value="05">Split</option>');
 
 
// select box 초기화 하는 함수.
function fnResetSelectBox(formName,objId)
{
     $("form[name='"+formName+  "'] select[name='"+objId+"'] option").remove();   
     $("form[name='"+formName+  "'] select[name='"+objId+"']").append("<option value="">==SELECT==</option>");
}
 
 
//select box 기본 값 남기고 삭제 하기
function fnResetSelectBox(formName,objName )
{
    $("form[name='"+formName+"'] select[name='"+ objName +"'] option").not("[value='']").remove();
}
 
//특정 index로 값 설정하기
$('#selectBox option:eq(3)').attr('selected', 'selected')



저작자표시 (새창열림)

댓글()

Jquery를 이용한 XML 데이터 파싱

Open API/Jquery|2016. 10. 28. 09:14
반응형



많은 부분의 Jquery UI API들이 대부분이런 형태로 XML 데이터를 파싱하여 배열에 넣고


UI를 생성하는 방식으로 처리되고 있는 것 같다.


XML 파일

<?xml version="1.0" encoding="utf-8" ?>
- <root>
    - <item>
         <no>번호</no>
         <title>제목</title>
         <type>타입</type>
      </item>
  </root>

Javascript 소스

$.ajax({
   type: "get"
  ,dataType: "xml"
  ,url: "xml파일 주소"
  ,success: function(xml){
      if($(xml).find("item").length > 0){ // null check
         $(xml).find("item").each(function(){ // item 수만큼 loop
            // item 요소 중 title 읽어오기.
            var title = $(this).find("title").text();
         });
      }
   }
   ,error: function(){ alert("xml error!!"); }
});


저작자표시 (새창열림)

댓글()

jQuery 메뉴 바 샘플 코드

Open API/Jquery|2016. 10. 28. 09:10
반응형



간편하게 사용할 수 있는 메뉴 바 샘플 코드입니다.



  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title id='Description'>The sample demonstrates how to center the menu items.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = getTheme();
                $("#jqxMenu").jqxMenu({ width: '50%', height: '30px', theme: theme });
             
                var centerItems = function () {
                    var firstItem = $($("#jqxMenu ul:first").children()[0]);
                    firstItem.css('margin-left', 0);
                    var width = 0;
                    var borderOffset = 2;
                    $.each($("#jqxMenu ul:first").children(), function () {
                        width += $(this).outerWidth(true) + borderOffset;
                    });
                    var menuWidth = $("#jqxMenu").outerWidth();
                    firstItem.css('margin-left', (menuWidth / 2 ) - (width / 2));
                }
                centerItems();
                $(window).resize(function () {
                    centerItems();
                });
            });
        </script>
           <div id='jqxMenu'>
                <ul>
                    <li>Booking 
                        <ul style='width: 250px;'>
                            <li><a href="#Financial">Booking</a></li>
                            <li><a href="#Education">Group Booking</a></li>
                        </ul>
</li>
                    <li>Basic Code
                        <ul style='width: 250px;'>
                            <li><a href="#Education">Nation Code</a></li>
                            <li><a href="#Financial">City Code</a></li> 
<li>Basic Code
<ul style='width: 250px;'>
<li><a href="#Education">Nation Code</a></li>
<li><a href="#Financial">City Code</a></li> 
</ul>
</li>
</ul>
                    </li>
                    <li>Event
                        <ul>
                            <li><a href="#PCProducts">Promotion</a></li> 
                            <li>Main Page Event Management
                                <ul style='width: 220px;'>
                                    <li><a href="#ConsumerPhoto">Tab</a></li>
                                    <li><a href="#Mobile">Event Hotel</a></li> 
<li>Basic Code
<ul style='width: 250px;'>
<li><a href="#Education">Nation Code</a></li>
<li><a href="#Financial">City Code</a></li> 
</ul>
</li>
                                </ul>
                            </li>
                            <li><a href="#">Event Image</a></li>
                        </ul> 
                    </li>
                </ul>
            </div>
 
    </div>
</body>
</html>


저작자표시 (새창열림)

댓글()
이전 1 ··· 56 57 58 59 60 다음

티스토리툴바