JQuery에서 Select Box 제어 하기

JQuery에서 Selectbox를 컨트롤하는 방법에는 여러 가지가 있는데 자주 사용하는 방법에 대하여 바로 복사해서 사용 할 수 있도록 정리한다.

• 현재 선택되어진 Selectbox의 값 읽기

  // Get selected value
  $('#myselectbox option:selected').val()
  // Get selected text
  $('#myselectbox option:selected').text()
  // Get selected index
  $('#myselectbox option').index($('#myselectbox option:selected'))

• Selectbox의 Selected 값 설정

  // Set the element at index 2 to be selected
  $('#myselect option:eq(2)').attr('selected', 'selected')
  // Set the selected element by text
  $('#myselect').val('Text1').attr('selected', 'selected')
  // Set the selected element by value
  $('#myselect').val('Value1')

• Selectbox의 option 추가

  // Add option to the end of a select
  $('#myselectbox').append("<option value='value1'>text1</option>")
  // Add option to the start of a select
  $('#myselectbox').prepend("<option value='value1'>text1</option>")
  // Insert an item in after a particular position
  $('#myselect option:eq(0)').after("<option value='Value4'>Text4</option>")
  // Insert an item in before a particular position
  $('#myselect option:eq(3)').before("<option value='Value5'>Text5</option>")

• Selectbox의 option 변경

  // Replace all the options with new options
  $("#myselect").html("<option value='value1'>New Text1</option>
  <option value='Value2'>New Text2</option>");
  // Replace items at a certain index
  $("#myselect option:eq(1)").replaceWith("<option value='Value2'>New Text2</option>");

• Selectbox의 option 삭제

  // Remove an item at a particular index
  $('#myselect option:eq(0)').remove()
  // Remove first item
  $('#myselect option:first').remove()
  // Remove last item
  $('#myselect option:last').remove()

원글 출처: https://donghunl.tistory.com/47