Skapa listitems.

Hej alla javahackare.

Jag skulle vilja ha ett litet script för att skapa listitems utifrån en lista som jag redan har, typ genom dubbelklick på en item i den fulla listan gör att det skapas en ny item i den tomma listan.

Sen skulle jag även vilja (i den listan man fyller på) kunna flytta en item upp och ner i listan på nåt sätt.

Tacksam för tips om hur man ska göra detta!

Skall det item man väljer kopieras eller flyttas till den andra <select>-listan?

Spelar ingen roll egentligen, det räcker med om den kopieras.

Alrighty then:

<script type="text/javascript">

function moveLocal(obj, dir, sel){
  sel = obj.form.elements[sel];

  if (sel.selectedIndex > -1){
    if ((dir == "up" && sel.selectedIndex == 0)
	|| (dir == "down" && sel.selectedIndex == sel.options.length - 1)){
      return;
    }

    var opts   = sel.options,
	arr    = [],
	oldPos = sel.selectedIndex,
	newPos = oldPos - (dir == "up" ? 1 : -1);

    for (var i = 0; i < opts.length; ++i){
      if (i == oldPos){
	arr[newPos] = opts[oldPos];
      } else if (i == newPos){
	arr[oldPos] = opts[newPos];
      } else {
	arr[i] = opts[i];
      }
    }

    opts.length = index = 0;

    for (var i = 0; i < arr.length; ++i){
      opts[i] = new Option(arr[i].text, arr[i].value);
    }
  }
}

function addNew(obj, sel){
  var elm      = obj.options[obj.selectedIndex],
      targOpts = obj.form.elements[sel].options,
      len      = targOpts.length,
      exists   = false;

  for (var i = 0; i < len; ++i){
    if (targOpts[i].text == elm.text
	&& targOpts[i].value == elm.value){

      exists = true;
      break;
    }
  }

  if (!exists){
    targOpts[targOpts.length] = new Option(elm.text, elm.value);
  }
}

</script>

<form>
  <div style="float:left">
    <select size="8" name="s1" ondblclick="addNew(this, 's2')">
      <option>A</option>
      <option>B</option>
      <option>C</option>
      <option>D</option>
      <option>E</option>
      <option>F</option>
    </select>
  </div>
  <div style="float:left; padding-left:5px">
    <select size="8" name="s2">
      <option>G</option>
      <option>H</option>
      <option>I</option>
      <option>J</option>
      <option>K</option>
      <option>L</option>
    </select>
  </div>
  <div style="float:left;margin:35px 10px 0 10px">
    <button type="button" onclick="moveLocal(this, 'up', 's2')">up</button>
    <br>
    <button type="button" onclick="moveLocal(this, 'down', 's2')">down</button>
  </div>
</form>

Helt suveränt. Bara en liten grej, när man trycker på Up eller Down så tappar den focus, går det ha kvar focus på något sätt när man trycker, så att man kan trycka flera gånger på upp och ner.

Tack som fan, det här är kanonskript för mig!

Tillägg: Skulle även vilja ha möjligheten att ta bort en option från selectlistan. Typ en ondblclick handler i selecten som heter s2 som gör nåt i stil med this.option.delete. Går det att få till?

<script type="text/javascript">

function moveLocal(obj, dir, sel){
  sel = obj.form.elements[sel];

  if (sel.selectedIndex > -1){
    if ((dir == "up" && sel.selectedIndex == 0)
	|| (dir == "down" && sel.selectedIndex == sel.options.length - 1)){
      return;
    }

    var opts   = sel.options,
	arr    = [],
	oldPos = sel.selectedIndex,
	newPos = oldPos - (dir == "up" ? 1 : -1);

    for (var i = 0; i < opts.length; ++i){
      if (i == oldPos){
	arr[newPos] = opts[oldPos];
      } else if (i == newPos){
	arr[oldPos] = opts[newPos];
      } else {
	arr[i] = opts[i];
      }
    }

    opts.length = index = 0;

    for (var i = 0; i < arr.length; ++i){
      opts[i] = new Option(arr[i].text, arr[i].value);
    }

    opts[newPos].selected = true;
  }
}

function addNew(obj, sel){
  var elm      = obj.options[obj.selectedIndex],
      targOpts = obj.form.elements[sel].options,
      len      = targOpts.length,
      exists   = false;

  for (var i = 0; i < len; ++i){
    if (targOpts[i].text == elm.text
	&& targOpts[i].value == elm.value){
      exists = true;
      break;
    }
  }

  if (!exists){
    targOpts[targOpts.length] = new Option(elm.text, elm.value);
  }
}

function rm(obj){
  var opts   = obj.options,
      len    = opts.length,
      arr    = [],
      oldPos = obj.selectedIndex;

  for (var i = 0; i < len; ++i){
    if (i != oldPos){
      arr.push_back(opts[i]);
    }
  }

  opts.length = 0;

  for (var i = 0; i < len - 1; ++i){
    opts[i] = new Option(arr[i].text, arr[i].value);
  }

  if (opts.length != 0){
    opts[oldPos ? oldPos - 1 : 0].selected = true;
  }
}

Array.prototype.push_back = function(o){
  this[this.length] = o;
}

</script>

<form>
  <div style="float:left">
    <select size="8" name="s1" ondblclick="addNew(this, 's2')">
      <option>A</option>
      <option>B</option>
      <option>C</option>
      <option>D</option>
      <option>E</option>
      <option>F</option>
    </select>
  </div>
  <div style="float:left; padding-left:5px">
    <select size="8" name="s2" ondblclick="rm(this)">
      <option>G</option>
      <option>H</option>
      <option>I</option>
      <option>J</option>
      <option>K</option>
      <option>L</option>
    </select>
  </div>
  <div style="float:left;margin:35px 10px 0 10px">
    <button type="button" onclick="moveLocal(this, 'up', 's2')">up</button>
    <br>
    <button type="button" onclick="moveLocal(this, 'down', 's2')">down</button>
  </div>
</form>

Tack Peter S du är en klippa!!!