jQuery jQuery로 Select(콤보박스) 값 가져오기·설정·옵션 추가/삭제
페이지 정보
조회 171회
작성일 20-04-28 16:48
jQuery를 이용해 Select(콤보박스) 요소를 다루는 방법을 정리한 글이다. change 이벤트 처리, 선택된 option의 텍스트·값·인덱스 가져오기, 원하는 항목을 선택 상태로 설정하는 방법, append와 prepend로 옵션을 추가하고 remove로 특정 옵션을 삭제하는 방법, empty()로 전체 옵션을 비우는 코드를 예제와 함께 담고 있다.
语法解释:
$("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发
var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text
var checkValue=$("#select_id").val(); //获取Select选择的Value
var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值
var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值
//jQuery设置Select选择的Text和Value:
语法解释:
$("#select_id ").get(0).selectedIndex=1; //设置Select索引值为1的项选中
$("#select_id ").val(4); //设置Select的Value值为4的项选中
$("#select_id option[text='jQuery']").attr("selected", true); //设置Select的Text值为jQuery的项选中
/*
jQuery添加/删除Select的Option项:
请选择
点击一次,Select将追加一个Option
点击将在Select第一个位置插入一个Option
点击将删除Select中索引值最大Option(最后一个)
语法解释:
$("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项)
$("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置)
$("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个)
$("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个)
$("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option
$("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option
清楚所有选项:
$("#select_id").empty(); - 이전글검색엔진 크롤링과 인덱싱의 차이 (robots.txt vs meta robots) 20.04.28
- 다음글PHP에서 파일 확장자 추출하는 5가지 방법 20.04.28