jQuery : 셀렉트 박스 : 옵션 추가, 제거, 선택 제거, 배열로 추가 : 방법, 예제

jQuery : 셀렉트 박스 : 옵션 추가, 제거, 선택 제거, 배열로 추가 : 방법, 예제

 

jQuery를 사용하여 셀렉트 박스에서 옵션 항목 제거

JQuery는 JavaScript를 사용하여 코딩하는 데 걸리는 시간을 줄이고 코딩하는 데 필요한 줄의 수를 줄이는 쉬운 방법입니다. jQuery를 사용하여 선택 상자에서 옵션을 제거하는 것이 좋은 예입니다. 

selectbox가 있는 경우  :

<select id="selectBox" name="selectBox">
  <option value="option1"> option1 </option> 
  <option value="option2"> option2 </option> 
  <option value="option3"> option3 </option> 
  <option value="option4"> option4 </option>
</select>

 

 

 

 

셀렉트 드롭 다운에서 제거 방법

옵션 제거하는 방법은 다음과 같습니다.

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

 

 

 

셀렉트 드롭 다운에서 옵션 추가 방법

셀렉트 박스에 옵션을 추가하기 위해, 옵션 리스트 마지막에 추가를 해줍니다.

$("#selectBox").append('<option value="option6">option6</option>');

 

 

 

첫번째를 제외하고 모든 옵션 제거 방법

Ajax를 사용하여 채워야하는 선택 상자가 있는 경우 첫 번째 옵션이 비어있는 값으로 사용되므로 첫 번째 옵션을 유지해야합니다. 선택 상자에 있는 데이터는 변경되지 않습니다.

ajax를 사용할 때 다른 모든 옵션을 제거하여 새 데이터로 선택 상자를 다시 채울 수 있습니다. 다음 코드를 사용하여 첫 번째 옵션을 제외한 선택 상자의 모든 옵션을 제거할 수 있습니다.

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

 

 

 

배열로 옵션 추가하기

선택 상자를 채우는 데 사용할 키 값 쌍 배열이있는 경우 다음 스니펫을 사용하여 선택 상자를 키 값 쌍으로 채울 수 있습니다. 

$.each(selectValues, function(key, value) { $('#mySelect') .append($("<option></option>") .attr("value",key) .text(value)); });