Script | Jquery select box 제어하기

페이지 정보

작성일2016-09-21 15:13 조회6,049회

본문

목차

기본 기능

선택값

선택 텍스트 내용

선택 위치(index)

추가 기능

마지막 자식요소 추가

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

전체 요소 추가하기

요소 바꾸기

SELECT 하기

삭제 하기

선택값 구하기

갯수 구하기

삽입하기

SELECT BOX 예제

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