jquery insert option before option with greater class

Question

Hi i want create function which will after clicking button remove option from one list and insert in to another but before option with class with grater suffix than one that i selected. Class name is opt_$i so when i select opt_4 i want to insert it before opt which is greater (its not always 5 it can be 73)

function minus(id)
{
    var c = $('select#'+ id +' option:selected');
    var cities = $('select[name=cities] option');

    c.each(function(){
       var item = $(this);
       var current = parseInt($(this).attr('class').replace(/[^0-9]/g, ''));

       cities.each(function(){
           var next = parseInt($(this).attr('class').replace(/[^0-9]/g, ''));

           if(next > current)
           {
               var next_item = $(this);
               return; // I dont know why this doesnt work ??
           }
       });
       /**
       if(previouse == 1)
       {
           $('select[name=cities] option:first').before(
                $('<option></option>')
                    .attr('value', current.val())
                    .attr('class', current.attr('class'))
                    .text(current.text())
           );    
       }
       else
       {
       */
           //$('select[name=cities] option[class=opt_'+ previouse +']').next()
           next_item.before(
                $('<option></option>')
                    .attr('value', current.val())
                    .attr('class', current.attr('class'))
                    .text(current.text())
           );
       //}
       $(this).remove();
    });
}

Is there better way to achive this ?? Than looping every time list in which i want to insert option to find greater class value ??

Edit:

<select id="a">
  <option class="opt_3">a</option>
</select>

<select id="b">
 <option class="opt_1">c</option>
 <option class="opt_7">d</option>
</select>

after clicking on button i want to remove option from list a and insert to list b but before opt_7. How to find option which has class greater than opt_3 ??

SOULUTION http://jsfiddle.net/Atm8V/6/ here is how it should work, thanks for all comments.

Two questions: 1) Is your code throwing any kind of error, or is it just failing silently? 2) Have you stepped through the code or thrown in some alerts to see what the values of `next` and `current` are to make sure they're what you expect? You'll get better and faster help if you can better define what is going wrong. — Mark M, Jun 12 '12 at 12:33
`var next_item = $(this);` this is ok but loop is not stopping on `return` and I get `Error: next_item is not defined Source File: http://mk.ie/back/location/add Line: 186` at the end of loop — kskaradzinski, Jun 12 '12 at 12:36
The next_item error is easy - you declare the variable inside of the if statement `if(next > current)` so it's out of scope when you attempt to call the before function. — Mark M, Jun 12 '12 at 12:45
From your example, assuming that element with id "b" is the cities select, you would need to alter that select like so: ` — Mark M, Jun 12 '12 at 12:48
http://jsfiddle.net/Atm8V/ here JSLint shows that code is valid but its not working. Options is not moving from cities to `column_1` on my localhost it works — kskaradzinski, Jun 12 '12 at 13:02
jsFiddle wraps your JavaScript in a $(document).ready function, so you'll need to add your onclick handlers using jQuery. — Mark M, Jun 12 '12 at 13:24

score 1 · Answer 1 · edited May 23 '17 at 12:21

As long as you are removing and inserting elements between the select's you'll need to do some type of sorting.

If you're moving mostly single options from select to select it's probably better to do that by iterating through the target select at the time of insertion than to call a sort algorithm that may not be optimized for the degree of sorted-ness that your option list will have, although the performance difference on this point may be negligible.

If you expect multiple items to be moved at once on a regular basis it might be better to insert them into the target select and then use jQuery's sort method like so. That would get rid of the explicit inner loop in your code (by hiding it in the sort).

The difference between the two options is, of course, dependent on the length of the options list and, as I implied previously, the average expected number of items transferred at a time. If the insert-all-items-then-sort method works for you I'd follow that route because your code will be more modular and easily readable.

jquery insert option before option with greater class

1 Answers1