> 웹 프론트엔드 > JS 튜토리얼 > jquery는 listbox_jquery에서 항목의 이동 및 정렬을 제어합니다.

jquery는 listbox_jquery에서 항목의 이동 및 정렬을 제어합니다.

WBOY
풀어 주다: 2016-05-16 18:41:49
원래의
1301명이 탐색했습니다.

첫 번째는 html 코드입니다. 페이지에 항목 이동을 위한 2개의 목록 상자 컨트롤과 2개의 버튼을 넣습니다.

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




< ;td width="142">




모든 과일: 내 선택: < ;/asp :ListBox>







다음은 .cs 파일의 일부 데이터를 바인딩하는 것입니다



public 부분 클래스 _Default : System.Web.UI.Page
{
protected void Page_Load(object sender , EventArgs e)
{
if (!IsPostBack)
{
BindData()
}
}

private void BindData()
{
ArrayList list=DataArray ();
for (int i = 0; i < list.Count; i )
{
listall.Items.Add(list[i].ToString() );
listall.Items[i].Attributes["tag"] = i.ToString(); //정렬 필드를 기록하는 데 태그 사용
}
}

private ArrayList DataArray ()
{
//사용된 일부 데이터는 기본적으로 첫 번째 단어의 병음으로 정렬됩니다.
ArrayList list = new ArrayList()
list.Add("Strawberry"); >list.Add("배");
list.Add("오렌지");
list.Add("망고")
list.Add("Apple"); .Add("Banana ");
return list;
}
}


실제 사용 시 데이터베이스의 필드에 따라 정렬할 수 있습니다

jquery 코드는 다음과 같습니다.





코드 복사
코드는 다음과 같습니다. //사용자가 선택한 역할 이동 //setname: 이동할 데이터 목록 이름 getname: 이동할 데이터 목록 이름
function move(setname ,getname)
{
var size=$("#" setname " option").size ()
var selsize=$("#" setname " option:selected").size() ;
if(size>0&&selsize>0)
{
$.each($( "#" setname " option:selected"), function(id,own){
var text=$ (own).text();
var tag=$(own).attr("tag")
$("#" getname).prepend("");
$(own).remove();
$("#" setname "").children("option:first").attr(" selected",true);
});
}
//재주문
$.each($("#" getname " option"), function(id,own){
orderrole(getname);
})
}

//첫 번째 알파벳 순서 역할 목록 누르기
function orderrole(listname)
{
var size=$(" #" listname " option").size();
var one=$("#" listname " option:first-child");
if(size>0)
{
var text=$(one).text();
var tag=parseInt($(one).attr("tag"))
//목록의 첫 번째 값 아래에 있는 모든 요소를 ​​반복합니다
$.each($(one).nextAll(), function(id,own){
var nextag=parseInt($(own).attr("tag"));
if(tag>nexttag)
{
$(one).remove();
$(own).after("");
one=$(own).next();
}
});
}
}


이로 값에 대한 간단한 js 제어가 완료됩니다. 두 목록 항목의 이동.
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿