[JAVASCRIPT 이론] AX5UI - Select Box

✅ SELECT BOX 기본값

jsp

/* ax5ui 컴포넌트를 모두 사용하기 위해 필요한 스크립트와 스타일시트 */
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/ax5ui/ax5ui-kernel/master/dist/ax5ui.all.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/ax5ui/ax5ui-kernel/master/dist/ax5ui.all.min.js"></script>

<div id="test" data-ax5select="test" data-ax5select-config="{size:'sm',theme:'primary'}"></div>

 

javascript

$('[data-ax5select="test"]').ax5select({
    options: [
    	{value: "", text: ""},
        {value: "", text: ""},
        {value: "", text: ""}
    ]
});

 

 

 

 

 

 

📍 SELECT BOX 선택한 값의 데이터 셋팅 

javascript

$('[data-ax5select="test"]').ax5select(“setValue”, value, true);
// 셀렉트 박스에서 현재 선택한 값의 데이터를 셋팅

 

ex)

$('[data-ax5select="test"]').ax5select({
    options: [
      {value: "0", text: "선택하세요"},
      {value: "1", text: "신발"},
      {value: "2", text: "가방"},
      {value: "3", text: "옷"}
    ]
});

var choose = $('[data-ax5select="test"]').ax5select(“setValue”, value, true);
// 사용자가 신발을 선택했을 시 choose = 1 (신발의 value 값인 1)

 

 

 

 

 

 

 

📍 SELECT BOX  활성화, 비활성화

javascript

// 셀렉트 박스에서 비활성화
$('[data-ax5select="test"]').ax5select("disable");

// 셀렉트 박스에서 활성화
$('[data-ax5select="test"]').ax5select("enable");

 

 

 

 

 

 

 

 

ex)

$('[data-ax5select="test"]').ax5select({
    options: [
      {value: "0", text: "선택하세요"},
      {value: "1", text: "신발"},
      {value: "2", text: "가방"},
      {value: "3", text: "옷"}
    ]
});

$(document).ready(function(){
  
  //확인버튼
  $('#btnOk').bind('click',function(){
    btnOk_Click();    
  });
  
});

function btnOk_Click(){
  //선택한 값 추출
  var selectedOption = $('[data-ax5select="test"] option:selected').val();
  var selectedText = $('[data-ax5select="test"] option:selected').ax5select("getText").text();
  
  if(selectedOption == 0){
    alert("옵션을 선택하세요.");
    $('#textName').val('');
    return;
  }
  //선택한 값 텍스트 데이터
  $('#textName').val( selectedText );
}

 

See the Pen Untitled by dawoon77 (@dawoon77) on CodePen.

 

 

 

 

 

 

 

 

 

ex)

DB데이터 활용

$('[data-ax5select="test"]').ax5select({
    options: []
});

$(document).ready(function(){
  
  //확인
  $('#btnOk').bind('click',function(){
    btnOk_Click();    
  });
  
});

function btnOk_Click(){
	
}