'select'항목을 자바 스크립트로 주문 하시겠습니까?

Question

항목을 주문하기 위해 옆에 위아래 화살표가있는 4 ~ 5 높이의 선택 상자를 갖는 방법에 대해 궁금합니다. 문제는 PHP를 사용하여 데이터베이스에서 항목을 그려 상자에 주문한 다음 다시 데이터베이스에 제출해야한다는 것입니다. 그래서 그것은 단지 미적인 변화 일뿐만 아니라 실제로 그것들의 ID를 바꾸어야합니다. 이것이 가능한가?

건배, BlackWraith

~ 수정 ~
이 난 그냥 항목을 재 배열 항목의 신규 수주를 기록 할 수 있도록하려면, 내가 사용하고자하는 코드입니다.

<select size="4"> 
    <option value='1'>1</option> 
    <option value='2'>2</option> 
    <option value='3'>3</option> 
    <option value='4'>4</option> 
    <option value='5'>5</option> 
    <option value='6'>6</option> 
    <option value='7'>7</option> 
</select> 

<br> 
<br> 
<input type="button" value="Up"> 
<br> 
<input type="button" value="Down"> 

Answer 1

기성품 인 jQuery UI Sortable 컨트롤을 사용하면 좀 더 멋지게 할 수 있습니다 : http://jqueryui.com/demos/sortable/

Answer 2

이 제품을 찾고 계십니까? 예를 들어 http://jsfiddle.net/DKCtV/1/

, 당신은

<div><input type='text' value='1' name='field[]' /> 
    <span class='up'>Up</span><span class='down'>Down</span></div> 
<div><input type='text' value='2' name='field[]' /> 
    <span class='up'>Up</span><span class='down'>Down</span></div> 
<div><input type='text' value='3' name='field[]' /> 
    <span class='up'>Up</span><span class='down'>Down</span></div> 
<div><input type='text' value='4' name='field[]' /> 
    <span class='up'>Up</span><span class='down'>Down</span></div> 
<div><input type='text' value='5' name='field[]' /> 
    <span class='up'>Up</span><span class='down'>Down</span></div> 
<div><input type='text' value='6' name='field[]' /> 
    <span class='up'>Up</span><span class='down'>Down</span></div> 
<div><input type='text' value='7' name='field[]' /> 
    <span class='up'>Up</span><span class='down'>Down</span></div> 

및 jQuery 코드를 선택 상자의 종류를 모르는

$('.up').css('cursor','pointer').click(function(){ 
    $(this).parents('div').insertBefore($(this).parents('div').prev()); 
}); 

$('.down').css('cursor','pointer').click(function(){ 
    $(this).parents('div').insertAfter($(this).parents('div').next()); 
}); 

다른 해결책은 값이 아닌 태그를 이동하는 것입니다 :)) http://jsfiddle.net/a3HV7/2/

$('.up').css('cursor','pointer').click(function(){ 
    var prev = $(this).parents('div').prev().find('input'), oldval = prev.val(); 
    prev.val($(this).siblings('input').val()); 
    $(this).siblings('input').val(oldval); 
}); 

$('.down').css('cursor','pointer').click(function(){ 
    var next = $(this).parents('div').next().find('input'), oldval = next.val(); 
    next.val($(this).siblings('input').val()); 
    $(this).siblings('input').val(oldval); 
}); 

Answer 3

"ObCollectionOrdered"구성 요소의 일부로 그 바로 그 실례가 있습니다 (기본적으로 배열 추상화로 인해 간단한) 주문 개체의 컬렉션을 관리 :

http://depressedpress.com/javascript-extensions/dp_obcollectionordered/

을 예제는 여기에 있습니다 :

http://home.comcast.net/~kiwidust/JSExtensions/DP_ObCollectionOrdered/Example1.htm

그것의 BASI cally는 컬렉션에 "옵션"개체를로드하기 만하면 모든 종류의 동작과 정렬을 수행 할 수있는 매우 간단한 액세스를 제공합니다. 그런 다음 select를 다시 그리는 간단한 함수가 있습니다.

"항목 순서"는 언제든지 액세스 할 수 있도록 컬렉션에 보관됩니다.

대부분의 양식 프레임 워크는 이미 하나를 사용하고 있다면 내장되어 있지만, 바닐라 코드에 신속하게 추가하려면 트릭을해야합니다. 더 단순한 것이 필요한 경우이 구성 요소에서 불필요한 항목을 제거 할 수 있습니다.

희망이 도움이됩니다.

Answer 4

나는 'sortable'함수 인 jQuery를 사용하기로 결정했다. 도움을 주신 모든 분들께 감사드립니다.