<select><option> sikkert ret simpelt

jo.

Her er en start:

function setenables (who) {

var sel = document.all [\"boks1\"].value;

for (cnt=0; cnt<document.all [\"boks2\"].length; cnt++) {
alert ((document.all [\"boks2\"].options [cnt].value == sel));
document.all [\"boks2\"].options [cnt].disabled = (document.all [\"boks2\"].options [cnt].value == sel);
}

}

</script>

<select onChange=\"java script:setenables(this);\" name=\"boks1\">
    <option name=\"1\" value=\"1\">1
    <option name=\"2\" value=\"2\">2
    <option name=\"3\" value=\"3\">3
    <option name=\"4\" value=\"4\">4
  </select>

  <select name=\"boks2\">
    <option name=\"1\" value=\"1\">1
    <option name=\"2\" value=\"2\">2
    <option name=\"3\" value=\"3\">3
    <option name=\"4\" value=\"4\">4
  </select>

<script>
var huskB = new Array( -1, -1 );

function checkOK( sel, nr ) {
  if ( sel.selectedIndex == huskB[3-nr] ) { // ulovlig
    sel.selectedIndex = huskB[nr]; // tilbagefør valget
  } else {
    huskb[nr] = sel.selectedIndex; // husk ny værdi
  }
};

</script>

  <select name=\"boks1\" onchange=\"checkOK(this,1)\">
    <option name=\"1\">1
    <option name=\"2\">2
    <option name=\"3\">3
    <option name=\"4\">4
  </select>

  <select name=\"boks2\"\" onchange=\"checkOK(this,2)\">
    <option name=\"1\">1
    <option name=\"2\">2
    <option name=\"3\">3
    <option name=\"4\">4
  </select>

mvh JakobA

Ups. huskB med stort B.
    huskB[nr] = sel.selectedIndex; // husk ny værdi

Du kan også lave et script der gør de umulige valg usynlige, vha display:none/block
Noget ala
function change(el);
if (el.value == 1) {
  document.all.id1.style.display=\'none\';
  document.all.id3.style.display=\'none\';
}
if (el.value == 2) {
  document.all.id2.style.display=\'none\';
  document.all.id4.style.display=\'none\';
}
}
</script>
<select onChange=\"change(this);\" name=\"boks1\">
    <option name=\"1\" value=\"1\">1
    <option name=\"2\" value=\"2\">2
    <option name=\"3\" value=\"3\">3
    <option name=\"4\" value=\"4\">4
  </select>

  <select name=\"boks2\">
    <option name=\"1\" id=\"id1\" value=\"1\">1
    <option name=\"2\" id=\"id2\" value=\"2\">2
    <option name=\"3\" id=\"id3\" value=\"3\">3
    <option name=\"4\" id=\"id4\" value=\"4\">4
  </select>

Hm, den må jeg tage i mig igen, det virker ikke.

næh, det gør det desværre ikke :)

Så prøver jeg igen. Nu testet.

<html>
<head><title>Rullegardin</title>

<script language=\'javascript\'>

// kopier til anden select
//
function selCopy( frasel, tilsel ) {
  if ( tilsel.length > frasel.length ) tilsel.length = frasel.length;
  for ( var i=0; frasel.length>i; i++ ) {
    if ( i >= tilsel.length ) tilsel[i] = new Option;
    tilsel[i].text  = frasel[i].text;
    tilsel[i].value = frasel[i].value;
  };
}

// flytte selected valgmulighed een op
//
function selFlytOp( sel ) {
  if ( sel.selectedIndex < 0 ) return false; // ingenting selected
  if ( sel.selectedIndex ==0 ) return false; // allerede øverst
  var temp = sel[sel.selectedIndex].text;
  sel[sel.selectedIndex].text = sel[sel.selectedIndex-1].text
  sel[sel.selectedIndex-1].text = temp;
  temp = sel[sel.selectedIndex].value;
  sel[sel.selectedIndex].value = sel[sel.selectedIndex+1].value
  sel[sel.selectedIndex+1].value = temp;
  sel.selectedIndex -= 1;
  return true;                  // hvis engang du vil teste
};

// flytte selected valgmulighed een ned
//
function selFlytNed( sel ) {
  if ( sel.selectedIndex < 0 ) return false; // ingenting selected
  if ( sel.selectedIndex == (sel.length-1) ) return false; // allerede nederst
  var temp = sel[sel.selectedIndex].text;
  sel[sel.selectedIndex].text = sel[sel.selectedIndex+1].text
  sel[sel.selectedIndex+1].text = temp;
  temp = sel[sel.selectedIndex].value;
  sel[sel.selectedIndex].value = sel[sel.selectedIndex+1].value
  sel[sel.selectedIndex+1].value = temp;
  sel.selectedIndex += 1;
  sel[sel.selectedIndex+1].focus();
  return true;
};

</script>

</head>
<body onload=\"selCopy(document.form1.sel1, document.form2.sel2)\">

<form  name=\'form1\'>
<select name=\'sel1\'>
  <option>xxx</option>
  <option>xxx1</option>
  <option>xxx2</option>
  <option>xxx3</option>
  <option>xxx4</option>
  <option>xxx5</option>
  <option>xxx6</option>
  <option>xxx7</option>
  <option>xxx8</option>
  <option>xxx9</option>
  <option>xxx10</option>
  <option>xxx11</option>
  <option>xxx12</option>
  <option>xxx13</option>
  <option>xxx14</option>
  <option>xxx151</option>
  <option>xxx16</option>
  <option>xxx17</option>
  <option>xxx18</option>
  <option>xxx19</option>
  <option>xxx20</option>
  <option>xxx21</option>
  <option>xxx22</option>
  <option>xxx23</option>
  <option>xxx24</option>
  <option>xxx25</option>
                <!-- masser af options genereret på server -->
</select>
</form>

<form name=\'form2\'>
<select name=\'sel2\'>
  <option>---------------</option> <!-- passende lang udspiler (NS4) -->
  <option>-</option>
  <option>-</option> <!-- 4-5 styks af hensyn til NS4.7og tidligere -->
  <option>-</option>
  <option>-</option>
...     
</select> &nbsp;
<input type=\'button\' value=\'up\' onclick=\"selFlytOp(this.form.sel2)\">
<input type=\'button\' value=\'ned\' onclick=\"selFlytNed(this.form.sel2)\">
</form>

</body>
</html>

mvh JakobA

Nae, næsten teste. i funktionen selFlytOp skal det også være -1 ved .value

  sel[sel.selectedIndex].value = sel[sel.selectedIndex-1].value
  sel[sel.selectedIndex-1].value = temp;
 

Tak for de gode forslag.
Jeg kan dog ikke helt se hvad meningen er med jakoba´s sidste forslag.
Jakoba´s første forslag kunne jeg sagtens få til at virke, og virker da også næsten som det skal. Jeg ville dog gerne have at de ulovlige valg slet ikke vises på listen. Er det ikke muligt ?
Jeg kunne selvfølgelig også lave det med check-bokse, det ville nok være mere simpelt, tror i ikke?

jesper

jjense21 >> Pinligt. Andet forslag er svar til et helt andet spørgsmål (brugeren kan flytte rundt på options i nedre selectbox med de der pilknapper)

var huskB = new Array( -1, -1, -1 );
var huskO = new Array( 0, 0, 0 );
var huskN = new Array( 0, \"boks1\", \"boks2\" );

function checkOK( sel, nr ) {
  var other = 3-nr;
  var sot = sel.form.elements[huskN[other]]; // den anden boks
  if ( huskB[nr] >= 0 ) {  // reinsert gammel i anden select
    sot.options[sot.options.length] = new Option( );
    for ( var i=sot.options.length-1; i>huskB[nr]; i-- ) {
      sot.options[i].text  = sot.options[i-1].text
      sot.options[i].value = sot.options[i-1].value
    };
    sot.options[i].text  = huskO[other].text
    sot.options[i].value = huskO[other].value
    if ( sot.selectedIndex >= huskB[nr] ) sot.selectedIndex += 1;
  }
  huskb[nr] = sel.selectedIndex; // husk ny værdi
  // fjern dette valg i anden select
  if ( sot.selectedIndex > huskB[nr] ) sot.selectedIndex -= 1;
  for ( var i=huskB[nr]; sot.options.length-1 > i; i++ ) {
    sot.options[i].text  = sot.options[i+1].text
    sot.options[i].value = sot.options[i+1].value
  };
  huskO[other].text  = sot.options[i].text;
  huskO[other].value = sot.options[i].value;
  sot.options.length = i; 
  }
};

</script>

  <select name=\"boks1\" onchange=\"checkOK(this,1)\">
    <option name=\"1\">1
    <option name=\"2\">2
    <option name=\"3\">3
    <option name=\"4\">4
  </select>

  <select name=\"boks2\"\" onchange=\"checkOK(this,2)\">
    <option name=\"1\">1
    <option name=\"2\">2
    <option name=\"3\">3
    <option name=\"4\">4
  </select>

mvh JakobA

Ps: er der et kursus igang? Nu er det pludselg select alle spørger om, for ikke så længe siden var det form-validering.

Fejl i scriptet:  valgets data skal huskes før de andre options rykkes ned.

  // fjern dette valg i anden select
  if ( sot.selectedIndex > huskB[nr] ) sot.selectedIndex -= 1;
  huskO[other].text  = sot.options[huskB[nr]].text;
  huskO[other].value = sot.options[huskB[nr]].value;
  for ( var i=huskB[nr]; sot.options.length-1 > i; i++ ) {
    sot.options[i].text  = sot.options[i+1].text
    sot.options[i].value = sot.options[i+1].value
  };
  sot.options.length = i;

Tusind tak for dit grundige arbejde jakoba.
Dog får jeg en fejl i den sidste af nedenstående kodelinier. Når jeg vælger et tal i en af boksene kommer Internet Explorer med en script error. Den siger \"object required\"

function checkOK( sel, nr ) {
var other = 3-nr;
var sot = sel.form.elements[huskN[other]];

Håber ikke jeg er til alt for meget besvær , jeg er meget nybegynder mht. java-script.

Jesper

Hum: det er muligt den bliver tilfreds hvis du siger:

var sot = sel.form[huskN[other]];

men kræver en del testing før jeg er sikker.
og det er sengetid nu, så du må vente lidt.

prøv evt at sætte en midlertidig alert ind for at debugge:
  alert( \"nr harværdien \"+nr );
den skal have værdien 1 eller 2, ingen andre værdier er tilladt.

og nej. det er ikke besvær, det er sjov (som dagløn betragtet er points ikke meget værd, det er lysten der driver værket:)

mvh JakobA

Det ser ikke rigtigt ud til at virke, og debugging-alerten returnerer 1 eller 2 hvilket jo er fint nok. Men jeg kan godt vente. Endnu engang tak for hjælpen jakoba.

Så gik det endelig. (Jeg rodede rundt i indexerner og de korrigerede indexer efter et valg var fjernet).
Men denneher ser OK ud:

<html>
<head>
<title>reciprok selectboks</title>

<META NAME=\"Generator\" CONTENT=\"Stone\'s WebWriter 3\">
<script language=\"javascript\"> <!--  //>

var debugOn = true;
function debug( str ) {
  if ( debugOn==true ) debugOn = confirm( str );
};

function copyOption( tilOpt, fraOpt ) {  // flyt Option data
  tilOpt.text  = fraOpt.text;
  tilOpt.value = tilOpt.value;
}; //end copyOption( Option object, Option object )

var huskB = new Array( -10, -10, -10 );
var huskO = new Array( 0, new Option(), new Option() );
var huskN = new Array( 0, \"boks1\", \"boks2\" );

function checkOK( sel, nr ) {  // fjern selected i anden boks
  var sot  = sel.form.elements[huskN[3-nr]]; // den anden boks
  var soto = sot.options;
  var i;

  if ( huskB[nr] >= 0 ) {      // reinsert gammel i anden select
    sot.options[soto.length] = new Option( );
    for ( i=soto.length-1; i>huskB[nr]; i-- )
      copyOption( soto[i], soto[i-1] );
    copyOption( soto[i], huskO[nr] );  // restore forrige valg
    if ( sot.selectedIndex>=i ) sot.selectedIndex += 1;
  };

  i = huskB[nr] = sel.selectedIndex;    // husk ny værdi
  // korriger i tilfælde af der mangler et valg i egen boks
  if ( huskB[3-nr]>0 && i>=huskB[3-nr] ) i = huskB[nr] = i+1;

  // fjern dette valg i anden select
  if ( sot.selectedIndex >= i ) sot.selectedIndex -= 1;
  copyOption( huskO[nr], soto[i] );    // gem dette valg
  for (  ; sot.options.length-1 > i; i++ )
    copyOption( soto[i], soto[i+1] );
  soto.length = soto.length-1;
}; //end checkOK( select Object, number )

// --> </script>

</head>
<body>

mvh JakobA

med naturligvis en fejl:

function copyOption( tilOpt, fraOpt ) {  // flyt Option data
  tilOpt.text  = fraOpt.text;
  tilOpt.value = fraOpt.value;    // rettet fra ... = tilOpt.value;
}; //end copyOption( Option object, Option object )

Nu er det sku ligefør jeg koder det med objektet for at få styr på de der indexer.
men denneher har jeg nu leget med en tid uden af finde flere fejl:

<html>
<head>
<title>reciprok selectboks</title>

<META NAME=\"Generator\" CONTENT=\"Stone\'s WebWriter 3\">
<script language=\"javascript\"> <!--  //>

var debugOn = true;
function debug( str ) {
  if ( debugOn==true ) debugOn = confirm( str );
};

function copyOption( tilOpt, fraOpt ) {  // flyt Option data
  tilOpt.text  = fraOpt.text;
  tilOpt.value = fraOpt.value;
}; //end copyOption( Option object, Option object )
 
var huskB = new Array( -10, -10, -10 );
var huskO = new Array( 0, new Option(), new Option() );
var huskN = new Array( 0, \"boks1\", \"boks2\" );

function checkOK( sel, nr ) {  // fjern selected i anden boks
  var sot  = sel.form.elements[huskN[3-nr]]; // den anden boks
  var soto = sot.options;
  var i;
  // reinsert forrige valg i den anden select ( if any )
  if ( huskB[nr] >= 0 ) {
    i = soto.length;
    soto[i] = new Option( );
    while ( i>huskB[nr] ) copyOption( soto[i], soto[--i] );
    copyOption( soto[i], huskO[nr] );  // restore forrige valg
    if ( sot.selectedIndex>=i ) sot.selectedIndex += 1;
  };

  // korriger i tilfælde af der mangler et valg i egen boks
  if ( 0>huskB[3-nr] || huskB[3-nr]>sel.selectedIndex )
      i = huskB[nr] = sel.selectedIndex
  else i = huskB[nr] = sel.selectedIndex+1;

  // fjern dette valg i anden select
  if ( sot.selectedIndex >= i ) sot.selectedIndex -= 1;
  copyOption( huskO[nr], soto[i] );    // gem dette valg
  while ( soto.length-1>i ) copyOption( soto[i], soto[++i] );
  soto.length = soto.length-1;
}; //end checkOK( select Object, number )

// --> </script>

</head>
<body>

<form name=\'formen\'>
<p>Når et punkt vælges i den ene selektboks forsvinder det i den anden.

<p>
  <select name=\"boks1\" size=5 onChange=\"self.checkOK(this,1)\">
    <option value=\"1\">valg 11111</option>
    <option value=\"alfabet\">valg 2222</option>
    <option value=\"3\">valg 333</option>
    <option value=\"4\">valg 44</option>
    <option value=\"5\">valg 5</option>
  </select>
&nbsp; &nbsp; &nbsp;
  <select name=\"boks2\" size=5 onChange=\"self.checkOK(this,2)\">
    <option value=\"1\">1 valg</option>
    <option value=\"2\">22 valg</option>
    <option value=\"3\">333 valg</option>
    <option value=\"4\">4444 valg</option>
    <option value=\"5\">55555 valg</option>
  </select>
</form>

<p align=\'right\'><!-- WebWriter AutoDato -->Opdateret: 6.4.2001<!-- WW -->
</body>
</html>