disable felter i andre dropdownbokse med tilsvarende værdi

Felterne kan både genkendes ved value og selectedIndex...ved ikke hvad der er smartest.

du kan gøre sådan her
----
<script>
function disable(select){
var selects = document.forms.form1.elements
var indeks = select.selectedIndex
for(i=0;i<selects.length;i++){
  if (selects[i] != select){
  selects[i].options[indeks].disabled = true;
  }
}
}
</script>

<form id="form1">
<select id="select1" onchange="disable(this);">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<select id="select2" onchange="disable(this);">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<select id="select3" onchange="disable(this);">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
</form>

Det eneste det kræver er at du har et id eller navn på din form
Du bør nok overveje om du ønsker at de ikke skal kunne enables igen
Altså hvis man i den første vælger "2" så bliver den disapled i de to andre ..
Men hvis nu man fortryder og så i den første vælger "1". så som det er nu så forbliver "2" disabled i de to andre

De 2 andre skal følge med - så det er den nye værdi der bliver låst hvis man skifter værdi i den første.

Forresten fik jeg vist ikke nævnt, at der er nogle felter (overskrifter til opdelinger) - disse skal ikke låse noget når man vælger dem. De kan genkendes på value="0".

Undskylder denne forglemmelse... :)

Lidt omstændigt men det her gør det i alt fald vil jeg mener
---
<script>
function disable(select){
  nulstil();
  var selects = document.forms.form1.elements
  for(i=0;i<selects.length;i++){
    for(j=0;j<selects.length;j++){
      if(i != j && selects[i].selectedIndex != 0){
        selects[j].options[selects[i].selectedIndex].disabled = true;
      }
    }
  }
}
function nulstil(){
  var selects = document.forms.form1.elements
  for(i=0;i<selects.length;i++){
    for(j=0;j<selects[i].options.length;j++){
      selects[i].options[j].disabled = false;
    }
  }
}
</script>

<form id="form1">
<select id="select1" onchange="disable(this);">
  <option value="0">nul</option>
  <option value="1">et</option>
  <option value="2">to</option>
  <option value="3">tre</option>
</select>
<select id="select2" onchange="disable(this);">
  <option value="0">nul</option>
  <option value="1">et</option>
  <option value="2">to</option>
  <option value="3">tre</option>
</select>
<select id="select3" onchange="disable(this);">
  <option value="0">nul</option>
  <option value="1">et</option>
  <option value="2">to</option>
  <option value="3">tre</option>
</select>
</form>

lidt forklaring måske
Når du vælger en option så kaldes funktionen disaple()
Den kalder først funktionen nulstil() som nulstiller alle selects
Dernæst løber den alle selects igennem og for hver løber den igen alle igennem og sætter de enkelte som disabled :o)
Så faktisk behøver den ikke kaldes med this...sådan her gøre det samme:
---
<script>
function disable(){
  nulstil();
  var selects = document.forms.form1.elements
  for(i=0;i<selects.length;i++){
    for(j=0;j<selects.length;j++){
      if(i != j && selects[i].selectedIndex != 0){
        selects[j].options[selects[i].selectedIndex].disabled = true;
      }
    }
  }
}
function nulstil(){
  var selects = document.forms.form1.elements
  for(i=0;i<selects.length;i++){
    for(j=0;j<selects[i].options.length;j++){
      selects[i].options[j].disabled = false;
    }
  }
}
</script>

<form id="form1">
<select id="select1" onchange="disable();">
  <option value="0">nul</option>
  <option value="1">et</option>
  <option value="2">to</option>
  <option value="3">tre</option>
</select>
<select id="select2" onchange="disable();">
  <option value="0">nul</option>
  <option value="1">et</option>
  <option value="2">to</option>
  <option value="3">tre</option>
</select>
<select id="select3" onchange="disable();">
  <option value="0">nul</option>
  <option value="1">et</option>
  <option value="2">to</option>
  <option value="3">tre</option>
</select>
</form>

Har du testet det? Jeg har prøvet dit eksempel direkte via copy/paste - men der synes ikke at ske noget som helst når man vælger en værdi i en dropdown. Får ingen fejl heller.

Ja det virker perfekt!..
Men jeg ser så nu at jeg jo kun har testet i FireFox. og at det ikke virker i IE
Det undrer mig.

Jeg har lige prøvet at sætte en til disabled selv sådan her
--
<select id="select3" onchange="disable();">
  <option value="0">nul</option>
  <option value="1">et</option>
  <option value="2">to</option>
  <option value="3" disabled>tre</option>
</select>
--
Det virker i FF men ikke i IE. Jeg vil tro det er fordi IE ikke er oppe på dupperne desværre :o(

Jep det virker i ff.

I opera virker det heller ikke - der disabler den de andre dropdowns helt når man vælger noget. Ikke bare et felt i dem.

:)

hmm måske er det fordi de ikke helt har implementeret "disable" på option niveau...

Men det er jo så såre simpelt
Hvis ikke IE og Opera tolker disbled korrekt
Så må du desværre enten undvære funktionaliteten eller overveje lave det på en helt anden måde. :( surt

Måske ikke...hmm, så må alternativet være at fjerne værdierne helt i stedet?

Altså fjerne dem i stedet for at disable dem.

Ja det er så det ...har lige prøvet sådan her
---
<head>
<script>
function disable(){
  nulstil();
  var selects = document.forms.form1.elements
  for(i=0;i<selects.length;i++){
    for(j=0;j<selects.length;j++){
      if(i != j && selects[i].selectedIndex != 0){
        selects[j].options[selects[i].selectedIndex].style.display = 'none';
      }
    }
  }
}
function nulstil(){
  var selects = document.forms.form1.elements
  for(i=0;i<selects.length;i++){
    for(j=0;j<selects[i].options.length;j++){
      selects[i].options[j].style.display = 'block';
    }
  }
}
</script>
</head>
<body>
<form id="form1">
<select id="select1" onchange="disable();">
  <option value="0">nul</option>
  <option value="1">et</option>
  <option value="2">to</option>
  <option value="3">tre</option>
</select>
<select id="select2" onchange="disable();">
  <option value="0">nul</option>
  <option value="1">et</option>
  <option value="2">to</option>
  <option value="3">tre</option>
</select>
<select id="select3" onchange="disable();">
  <option value="0">nul</option>
  <option value="1">et</option>
  <option value="2">to</option>
  <option value="3">tre</option>
</select>
</form>
</body>
--
Altså så de bliver stylet til none....
Men det virker sku også kun i FF... arghh

Haha, drilsk :)

ja jeg giver sku op.... beklager :o(...

Øv, i orden, du skal nok få nogle points som tak alligevel, når det kommer så langt.

Håber der er andre der vil give et bud...*host* roenving *host*

:)

eneste alternativ løsning jeg har er hvis du laver det i asp eller php så lægge selects i en form som du ved en onchange autosubmitter og ud fra det så i php eller asp genskriver selectsne med de nye værdier... omstændigt
Alternativt - fortæl dine brugere at de skal bruge FF...
Nok ikke en heldig løsning

Ja hvor er "de kloge folk" når man skal bruge dem ;o)

Jeg laver det i php, ja. Men det skal være javascript. Både for brugervenligheden og fordi der også sker en masse andre ting i javascript, som ikke må glemmes ved redirect.

Det er en lille editor ser du, hvor man kan drag n' drop'e nogle ting ind og sammensætte  sin forside i en webshop. Samt en masse andet...så en php løsning vil ikke du :)

ok..er spændt på om nogen kan lure hvad der skal til.

Nu har jeg fordoblet pointsne...måske nogle flere gider se på det nu ;)

har en løsning som næsten virker :o)
----
<head>
<script>
function disable(){
  var selects = document.forms.form1.elements
  var values = "";
  for(i=0;i<selects.length;i++){
    values += ','+selects[i].value
    antal = selects[i].options.length;
    for(j=0;j<antal-1;j++){
      selects[i].removeChild(selects[i].options[1]);
    }
    tal = Array('nul','et','to','tre');
    for(j=1;j<tal.length;j++){
      var opt = new Option(tal[j],j);
      selects[i].appendChild(opt);
      opt.text = tal[j];
    }
  }
  values = values.split(',');
  for(i=0;i<selects.length;i++){
    for(j=1;j<values.length;j++){
      var indeks = "";
      for(k=0;k<selects[i].options.length;k++){
        if(selects[i].options[k].value == values[j] && i != j-1 && values[j] != 0){
          indeks += ','+k;
        }
      }
      indeks = indeks.split(',');
      for(k=1;k<indeks.length;k++){
        selects[i].removeChild(selects[i].options[indeks[k]-(k-1)]);
      }
    }
  }
  for(i=0;i<selects.length;i++){
    for(j=0;j<selects[i].options.length;j++){
      if(selects[i].options[j].value == values[i+1]){
        selects[i].options[j].selected = true;
      }
    }
  }
}
</script>
</head>
<body>
<form id="form1">
<select id="select1" onchange="disable();">
  <option value="0">nul</option>
  <option value="1">et</option>
  <option value="2">to</option>
  <option value="3">tre</option>
</select>
<select id="select2" onchange="disable();">
  <option value="0">nul</option>
  <option value="1">et</option>
  <option value="2">to</option>
  <option value="3">tre</option>
</select>
<select id="select3" onchange="disable();">
  <option value="0">nul</option>
  <option value="1">et</option>
  <option value="2">to</option>
  <option value="3">tre</option>
</select>
</form>
</body>

Bliver tosset snart :o(...
Ovenstående virker perfekt i FF hos mig. I IE giver det en "udefineret fejl" hvis jeg i første select vælger 1, i anden 2, i tredie 3 og så i anden vælger nul.
Den kommer kun engang imellem når jeg vælger nul, og beskrivelse "udefineret fejl" hvad er det for noget IE gylle :o(..
Den kommer i linjen
selects[i].options[j].selected = true;
Hvis jeg ovenover den linje sætter en alert("hejsa") ... så virker det også fint i IE
Så det fatter jeg nada af
Troede ellers lige jeg havde et godt bud der.. prøv evt om din IE brokker sig eller om det kun er min... :o(

Tjah, der er jo mange krøller, der skal krølles udenom, men f.eks. sådan, hvor udgangspunktet har været standard-tingen, at man har en nul-option for at være sikker på, at chnage virkelig sker:

<script type="text/javascript">
var selValues = new Array(),selectedVals = new Array();
selValues[0] = new Array,selValues[1] = new Array;
window.onload = function(){
  var f = document.forms[0];
  var sels = f.getElementsByTagName("SELECT");
  for(i=0;sels.length>i;i++){
    if(selValues[0].length==0 && sels[i].name.indexOf('select')==0){//kigger kun på selects, hvis navn starter på 'select'
      for(j=1;sels[i].length>j;j++){
        selValues[0][j] = sels[i].options[j].value;
        selValues[1][j] = sels[i].options[j].text;
      }
    }
    selectedVals[i] = -1;
  }
}
function disable(sel){
  var actIndex = sel.selectedIndex;
  var actVal = sel.value;
  var f = sel.form;
  var sels = f.getElementsByTagName("SELECT");
  for(i=0;sels.length>i;i++){
    if(sels[i] == sel){
      selectedVals[i] = actVal;
    }
  }
  var found = false,actSel="",newOpt=null,selNum=1;
  for(i=0;sels.length>i;i++){
    if((sels[i] != sel || sel.selectedIndex == 0) && sels[i].name.indexOf('select')==0){
      actSel = sels[i].value;
      sels[i].length = 1;
      selNum = 1;
      for(j=1;selValues[0].length>j;j++){
        found = false;
        for(k=1;selectedVals.length>k;k++){
          found = found || (selectedVals[k] == selValues[0][j] && k != i);
        }
        if(!found){
          newOpt = new Option(selValues[1][j],selValues[0][j]);
          sels[i].options[selNum++] = newOpt;
        }
        if(selValues[0][j] == actSel)
          sels[i].selectedIndex = sels[i].length-1;
      }
    }
  }
}
</script>

<form>
Vælg metode:
  <select name="valgMode">
    <option>--Vælg--</option>
    <option value="metode1">Metode 1</option>
    <option value="metode2">Metode 2</option>
    <option value="metode3">Metode 3</option>
  </select><br><br>

Vælg rækkefølge:<br>
  <select name="select1" onchange="disable(this)">
    <option>--Vælg--</option>
    <option value="0">Nul</option>
    <option value="1">Et</option>
    <option value="2">To</option>
    <option value="3">Tre</option>
  </select>
  <select name="select2" onchange="disable(this)">
    <option>--Vælg--</option>
    <option value="0">Nul</option>
    <option value="1">Et</option>
    <option value="2">To</option>
    <option value="3">Tre</option>
  </select>
  <select name="select3" onchange="disable(this)">
    <option>--Vælg--</option>
    <option value="0">Nul</option>
    <option value="1">Et</option>
    <option value="2">To</option>
    <option value="3">Tre</option>
  </select>
  <select name="select4" onchange="disable(this)">
    <option>--Vælg--</option>
    <option value="0">Nul</option>
    <option value="1">Et</option>
    <option value="2">To</option>
    <option value="3">Tre</option>
  </select>
</form>

forstår ikke hvad den metode select gør?

-- ikke andet end at vise, at jeg indrettet tingen til at virke selvom du har andre selects i din form, og så var metode en rimelig mulighed for at have brug for flere !-)

Jamen det virker ikke hvis jeg fjerner den metode? :) Skal kun bruge de 4.

Hrm, jeg havde fået lavet en blunder lige der (og opdagede så, at evt. ekstra selects ikke må have værdier i den initielt valgte, som går igen i de andre selects !-)

Men ændr et 1-tal til 0:

        for(k=0;selectedVals.length>k;k++){

Hehe, perfekt :)

Laver I ikke et svar hver? Så kan I dele pointsne, hvis det er ok med jer begge.

Lige efter mit hovede !-)

Velbekomme '-)

oki doki .. sikken en omgang :o)

Jeps - tak for forsøgene busschou :)

-- og tak for point ;~}

Jeg har lige oprettet et spørgsmål angående dette, hvor jeg har udloddet lidt flere points til en videreudvikling af roenving's script. Jeg håber, I vil tage et kig på spørgsmålet:

http://www.eksperten.dk/spm/733461