>  기사  >  웹 프론트엔드  >  jQuery 선택 제어 플러그인_jquery

jQuery 선택 제어 플러그인_jquery

WBOY
WBOY원래의
2016-05-16 18:48:05864검색

모든 사람과 코드 공유:
JavaScript 코드

코드 복사 코드는 다음과 같습니다.

/ /선택 항목 수 가져오기
jQuery.fn.size = function()
{
return jQuery(this).get(0).options.length
}
// 선택한 항목의 인덱스 가져오기
jQuery.fn.getSelectedIndex = function()
{
return jQuery(this).get(0).selectedIndex
}
/ /현재 선택한 항목 가져오기
jQuery.fn.getSelectedText = function()
{
if(this.size() == 0)
{
return "옵션 없음"의 텍스트 드롭다운 상자에서";
}
else
{
var index = this.getSelectedIndex();
return jQuery(this).get(0).options[index] .text;
}
}
//현재 선택한 항목의 값 가져오기
jQuery.fn.getSelectedValue = function()
{
if(this.size() == 0)
{
return "드롭다운 상자에 선택한 값이 없습니다."
}
else
{
return jQuery(this).val() ;
}
}
//설정 선택 값이 있는 항목이 선택되었습니다.
jQuery.fn.setSelectedValue = function(value)
{
jQuery(this).get( 0).value = value;
}
// select에 텍스트가 있는 첫 번째 항목이 선택되도록 설정
jQuery.fn.setSelectedText = function(text)
{
var isExist = false;
var count = this.size();
for(var i=0;i{
if(jQuery(this).get(0).options [i].text == text)
{
jQuery(this).get(0).options[i].selected = true
isExist =
break; }
}
if(!isExist)
{
alert("이 항목은 드롭다운 상자에 없습니다.")
}
}
// 선택한 인덱스 항목 설정
jQuery.fn.setSelectedIndex = function(index)
{
var count = this.size()
if(index >= count || index < 0 )
{
alert("선택한 항목 인덱스가 범위를 벗어났습니다.")
}
else
{
jQuery(this).get(0).selectedIndex = index ;
}
}
//선택한 항목에 값이 있는지 판단합니다.
jQuery.fn.isExistItem = function(value)
{
var isExist = false;
var count = this.size();
for(var i=0; i{
if(jQuery(this).get(0). options[i].value == value)
{
isExist = true;
break
}
}
return isExist; 항목을 선택하면 표시 내용은 텍스트이고 값은 값입니다. 항목 값이 이미 존재하는 경우
jQuery.fn.addOption = function(text,value)
{
라는 메시지가 표시됩니다. (this.isExistItem(value))
{
alert("추가할 항목의 값이 이미 존재합니다.")
}
else
{
jQuery(this) .get(0).options.add(new Option(text,value));
}
}
/ /선택 항목에 값이 있는 항목을 삭제합니다. 🎜>jQuery.fn.removeItem = 함수(값)
{
if(this.isExistItem(값))
{
var count = this.size()
for(var i=0;i{
if(jQuery(this).get(0).options[ i].value == value)
{
jQuery(this) .get(0).remove(i);
break;
}
}
}
else
{
alert("삭제할 항목이 없습니다. !");
}
}
//select에서 지정된 인덱스가 있는 항목 삭제
jQuery.fn.removeIndex = function(index)
{
var count = this .size();
if(index >= count || index < 0)
{
alert("삭제할 항목 인덱스가 범위를 벗어났습니다.")
}
else
{
jQuery(this).get(0).remove(index);
}
}
//select에서 선택한 항목 삭제
jQuery.fn.removeSelected = function()
{
var index = this.getSelectedIndex();
this.removeIndex(index);
}
//select의 모든 항목 지우기
jQuery.fn .clearAll = function()
{
jQuery(this).get(0).options.length = 0;
}


사용할 때는 먼저 jquery를 가져옵니다. .js 파일을 가져온 다음 jquery.liu.select.js 파일을 가져온 다음 플러그인 메서드를 호출합니다. 예를 들어, ID가 selEmail인 드롭다운 상자의 모든 항목을 지우려면 다음과 같이 하면 됩니다. $("#selEmail").clearAll()
참고: 이 플러그의 메서드는 -in은 ie7과 firefox에서 사용 가능합니다. 검증은 통과되었습니다. 오류나 개선이 필요한 부분이 있으면 비판하고 수정해 주시기 바랍니다.
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.