CODEWITHSUNDEEP
javascriptjquerymysqlhtml
Patch
Patch

Reputation: 2507

Order 'select' entries with javascript?

I was wondering how I'd go about having a select box with a height of perhaps 4 or 5, with an up and down arrow next to it to order the entries? Thing is, I need to draw the entries from a database with PHP, order them with the box, then submit them back to the database. So it can't just be an aesthetic change, its got to actually change the ID of them? Is this possible?

Cheers, BlackWraith

~EDIT~
This is the code I want to use, I just want to be able to rearrange the entries and record the new order of the entries.

<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">

Upvotes: 0

Views: 290

Answers (4)

Patch
Patch

Reputation: 2507

I've decided to use the jQuery 'sortable' function. Thanks to everyone who helped out

Upvotes: 0

Jim Davis
Jim Davis

Reputation: 1230

I've got an example of that very thing as part of my "ObCollectionOrdered" component (basically an array abstraction that makes it simple to manage collections of ordered objects):

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

The example is here:

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

It basically just loads the "option" objects into a collection - which gives you very simple access to do all sorts of movement and sorting on them. Then there's a simple function to redraw the select.

The "order of the entries" is kept in the collection for access at any time.

Most of the form frameworks have this built-in if you're already using one - but if you want to add it quickly to vanilla code this should do the trick. If you need something even simpler you can always strip the unneeded stuff from this component.

Hope this helps.

Upvotes: 0

Roberto Linares
Roberto Linares

Reputation: 2225

You can do it a little more fancy using the ready-made jQuery UI Sortable control: http://jqueryui.com/demos/sortable/

Upvotes: 2

Cheery
Cheery

Reputation: 16214

Are you looking for this? http://jsfiddle.net/DKCtV/1/

As an example, do not know what kind of select box you have

<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>

and jquery code

$('.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());
});

another solution is to move only the values, not the tags :)) 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);
});

Upvotes: 0

Related Questions