Re: [jQuery] Help: Iterate through unknown number of elements, apply function

[Nathan Klatt]

On Tue, Feb 23, 2010 at 2:20 AM, xstaceyamayx <sta...@staceymay.com> wrote:
> Anyway, I have 2 select boxes. I can populate SelectA with items from
> a database, move the items from selectA to selectB and back again by
> clicking "add" and "remove"...

Change your HTML to look something like this:
  <div class="input">
    <select multiple class="selectA">
      <?php //populate with database information ?>
    </select>
    <div>
      <button class="add">add &gt;&gt;</button><br />
      <button class="remove">&lt;&lt; remove</button>
    </div>
    <select multiple class="selectB"></select>
  </div>

Then your Javascript to something like:
$().ready(function() {
  $(".input").each(function(i) {
    $(this).find(".add").click(function() {
      var container = $(this).closest(".input");
      container.find(".selectA
option:selected").appendTo(container.find(".selectB"));
    });
    $(this).find(".remove").click(function() {
      var container = $(this).closest(".input");
      container.find(".selectB
option:selected").appendTo(container.find(".selectA"));
    });
  });
});

See it in action here: http://jsbin.com/osipu/edit

Nathan