Developer

Script | Jquery select box 제어하기

페이지 정보

작성일2016-09-21 15:13 조회5,257회

본문

목차

  1. 기본 기능
    1. 선택값
    2. 선택 텍스트 내용
    3. 선택 위치(index)
  2. 추가 기능
    1. 마지막 자식요소 추가
    2. 선택된 모든 요소의 앞에 추가하기
    3. 전체 요소 추가하기
    4. 요소 바꾸기
    5. SELECT 하기
    6. 삭제 하기
    7. 선택값 구하기
    8. 갯수 구하기
    9. 삽입하기
  3. SELECT BOX 예제
    1. JQUERY UI SELECT BOX 예제

1 기본 기능

1.a 선택값

$("#select_box option:selected").val();
$("#select_box > option:selected").val()
$("select[name=name]").val();

1.b 선택 텍스트 내용

$("#select_box option:selected").text();

1.c 선택 위치(index)

var index = $("#test option").index($("#test option:selected"));

2 추가 기능

2.a 마지막 자식요소 추가

// Add options to the end of a select
$("#select_box").append("<option value="1">black</option>");
$("#select_box").append("<option value="2">white</option>");

2.b 선택된 모든 요소의 앞에 추가하기

// Add options to the start of a select
$("#select_box").prepend("<option value="0">black</option>");

2.c 전체 요소 추가하기

// Replace all the options with new options
$("#select_box").html("<option value="1">black</option><option value="2">white</option>");

2.d 요소 바꾸기

// Replace items at a certain index
$("#select_box option:eq(1)").replaceWith("<option value="2">black</option>");
$("#select_box option:eq(2)").replaceWith("<option value="3">white</option>");

2.e SELECT 하기

// 지정된 index 값으로 select 하기
$("#select_box option:eq(2)").attr("selected", "selected");
 
// text 값으로 select 하기
$("#select_box").val("Some oranges").attr("selected", "selected");
 
// value 값으로 select 하기
$("#select_box").val("2");
$("#select_box > option[@value=지정값]").attr("selected", "true");

2.f 삭제 하기

// 지정된 인덱스 값의 item 삭제
$("#select_box option:eq(0)").remove();
 
// 첫번째 item 삭제
$("#select_box option:first").remove();
 
// 마지막 item 삭제
$("#select_box option:last").remove();

2.g 선택값 구하기

// 선택된 옵션의 text 구하기
alert($("#select_box option:selected").text());
 
// 선택된 옵션의 value 구하기
alert($("#select_box option:selected").val());
 
// 선택된 옵션 index 구하기
alert($("#select_box option").index($("#select_box option:selected")));
 
// SelecBox 아이템 갯수 구하기
alert($("#select_box option").size());

2.h 갯수 구하기

// 선택된 옵션 앞의 아이템 갯수
alert($("#select_box option:selected").prevAll().size());
 
// 선택된 옵션 후의 아이템 갯수
alert($("#select_box option:selected").nextAll().size());

2.i 삽입하기

// 0번째 item 다음에 삽입
$("#select_box option:eq(0)").after("<option value="1">black</option>");
 
// 3번째 item 전에 삽입
$("#select_box option:eq(3)").before("<option value="2">white</option>");

3 SELECT BOX 예제

// select box 값이 변경될때 선택된 현재값
$("#select_box").change(function() {
           alert($(this).val());
           alert($(this).children("option:selected").text());
});

3.a JQUERY UI SELECT BOX 예제

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Selectmenu - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <style>
    fieldset {
      border: 0;
    }
    label {
      display: block;
      margin: 30px 0 0 0;
    }
    .overflow {
      height: 200px;
    }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#speed" ).selectmenu();
 
    $( "#files" ).selectmenu();
 
    $( "#number" )
      .selectmenu()
      .selectmenu( "menuWidget" )
        .addClass( "overflow" );
 
    $( "#salutation" ).selectmenu();
  } );
  </script>
</head>
<body>
 
<div class="demo">
 
<form action="#">
  <fieldset>
    <label for="speed">Select a speed</label>
    <select name="speed" id="speed">
      <option>Slower</option>
      <option>Slow</option>
      <option selected="selected">Medium</option>
      <option>Fast</option>
      <option>Faster</option>
    </select>
 
    <label for="files">Select a file</label>
    <select name="files" id="files">
      <optgroup label="Scripts">
        <option value="jquery">jQuery.js</option>
        <option value="jqueryui">ui.jQuery.js</option>
      </optgroup>
      <optgroup label="Other files">
        <option value="somefile">Some unknown file</option>
        <option value="someotherfile">Some other file with a very long option text</option>
      </optgroup>
    </select>
 
    <label for="number">Select a number</label>
    <select name="number" id="number">
      <option>1</option>
      <option selected="selected">2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
      <option>10</option>
      <option>11</option>
      <option>12</option>
      <option>13</option>
      <option>14</option>
      <option>15</option>
      <option>16</option>
      <option>17</option>
      <option>18</option>
      <option>19</option>
    </select>
 
    <label for="salutation">Select a title</label>
    <select name="salutation" id="salutation">
      <option disabled selected>Please pick one</option>
      <option>Mr.</option>
      <option>Mrs.</option>
      <option>Dr.</option>
      <option>Prof.</option>
      <option>Other</option>
    </select>
  </fieldset>
 
</form>

</div>
 
</body>
</html>

#jquery #selectbox #script #제어 #jqueryui



  • 카카오스토리로 보내기
  • 페이스북으로 보내기
  • 트위터로 보내기
  • 구글플러스로 보내기
  • 더보기
  • Naver Blog로 보내기
  • TUMBLR로 보내기
  • LinkedIN으로 보내기
  • REDDIT으로 보내기
  • delicio으로 보내기
  • pinterest으로 보내기
  • 블로거로 보내기
php jquery cloud HTML 무설치 클라우드 script 팀박스 TEAMBOX 포터블 ssh css 기어s3 시그널 스마트워치 공유캐시삭제 facebook 삼성 페이스북 소스 코메디 IT CNET VR가상현실 싸이이비즈 ColorScripter GoingHome LGU+ 기업용클우드 sgnl 스마트시곗줄 extension 3DBChip 아스키코드 드라이버 나무클라우드 미국정보교표준부호 ASCII 아스키 selectbox chrome google 손가락통화 MiBand2 미밴드2 샤오미 Xiaomi 색상표 구글 크롬 확장프로램 제어 Comedy 팝업창 openssl encrypt decrypt 암호화 PHPParser 문서파싱 mRemote 서버관리프로그램 RemoteDesktop PHP암호화 array 레이어 오늘하루닫기 줄바꿈 word-break white-spac CURL/a> ajax 말줄임표 배열 컬러코드 ColorCode ssh2 원태연 시집 넌가끔가다 마술 수여니 재밋다 magic 수호천사 재미 ZOAPROJECT RADAZoa sftp jqueryui datepicker 하늘 하트 구름 김윤아 뮤직비디오 RADA Gamarjobat