jQuery 를 이용한 Select Element 제어

select 된 값 가졍오기

$("[Select Element] > option:selected").val();

select 된 텍스트 가졍오기

$("[Select Element] > option:selected").text();

현재 select 값 설정

$("[Select Element]> option[@value=지정값]").attr("selected", "true")

$("#smonth > option[value=02]").attr("selected", "true");
$("#smonth > option[value=" + obj.smonth + "]").attr("selected", "true");

선택된 인덱스 값 가져오기

var i= $("[Select Element] option").index($("[Select Element]option:selected"));

option 동적 추가

$('#selectBox').append(`<option value="${optionValue}">${optionText}</option>`);

option 동적 삭제

$("#selectBox option[value='option1']").remove();
$("#selectBox > option:selected").remove();

첫번째 optoin을 제외한 모든 옵션 삭제

$('select').children('option:not(:first)').remove();

추가 참조로 jquery만 사용해서 select 박스에 값을 넣거나 값을 가져오는 방식입니다.

option 이동

html

<div class="sample">
    <select size="10" id='assign'> </select>
    <div class="controller">
    <button id="move-left"> <- </button>
    <button id="move-right"> -> </button>
     </div>
    <select size="10" id='source'>
      <option value="100">라이프/취미</option>
      <option value="101">홈/리빙</option>
      <option value="102">애완동물</option>
      <option value="103">패션/뷰티</option>
      <option value="104">여행</option>
      <option value="105">영화</option>
    </select>
  </div>

js

$(function(){
  $("#move-left").click(function(){
    var optionValue = $("#source > option:selected").val();
    var optionText = $("#source > option:selected").text();

    $('#assign').append(`<option value="${optionValue}">${optionText}</option>`);
    $("#source > option:selected").remove();
  });

  $("#move-right").click(function(){
    var optionValue = $("#assign > option:selected").val();
    var optionText = $("#assign > option:selected").text();

    $('#source').append(`<option value="${optionValue}">${optionText}</option>`);
    $("#assign > option:selected").remove();
  });
});

See the Pen jQuery - Animate() by younghyeong ryu (@wangta69) on CodePen.

class 로 된 여러개중 특정 값 받아오기

$(".selected_class").change(function(){
  alert($(this).val());
  alert($(this).children("option:selected").text());
});


$(".r_driver_car").eq(i).children("option:[value="+obj.USER_CAR+"]").attr("selected", "true");
$(".sel_driver").eq(i).attr("selected", "true").val();

실렉트가 많을 경우 모든 값 받아오기

$.each($(".cat_type option:selected"), function(key, value){
  alert($(this).val());
});

ajax를 이용한 동적 제어

js

function getCategory(v, step) {
  if (step == 1) {
    $("#Category2").children('option:not(:first)').remove();
  } else if (step == 2) {
    $("#Category3").children('option:not(:first)').remove();
  }
  // 데이타 가져오기
  $.ajax({
    type: "GET",
    url: "./category",
    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").append(`<option value="${cat_no}">${cat_name}</option>`);
        } else if (step == 2) {
          $("#Category3").append(`<option value="${cat_no}">${cat_name}</option>`);
        }
      }); //close each(
    } //close function(xml)
  }); //close $.ajax(
} 

html

<select id="Category1" onchange="getCategory(this, 1);">
  <option value="" selected>대분류 </option>
  <option value="">----------------</option>
</select>
<select id="Category2" onchange="getCategory(this, 2);">
  <option value="" selected>중분류</option>
  <option value="">----------------</option>
</select>
<select id="Category3">
  <option value="" selected>소분류</option>
  <option value="">----------------</option>
</select>

상기에서는 서버에 접속하여 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>

json을 값을 받아와서 처리하기

xml로 처리하는 것보다 json으로 처리하는 것이 더 쉽고 유용하다. 아래는 그 예이다.

$.post("/json", {"cate_id":val}, function(data){
  var obj = JSON.parse(data);
  $.each(obj, function(i, item){
    $("#cat_cd").append(`<option value="${i}">${item}</option>`);
  }); //close each(
});