Mehrere Drop Down-Menüs - gleicher Inhalt

Schind · 21. August 2003

hi, ich bräuchte bitte hilfe:
ich arbeite gerade an einem spielplan für eine fussballliga. pro spieltag darf ein team ja nicht 2 mal spielen.

ich hab genau 6 drop down-menüs, die namen lauten: home11, home21, home31, away11, away21, away31.

in allen diesen menüs stehen zu beginn die 6 gleichen einträge (teams) drinnen:

PHP:

<option value="[id team1]">Team 1</option>
...
<option value="[id team6]">Team 6</option>

wenn ich in einem dropdown ein team auswähle, soll dieses dann in den anderen 5 dropdowns nicht mehr verfügbar sein. wie kann ich das programmieren?

Sven Mintel · 22. August 2003

Hi,Schind

kannst es ja mal ausprobieren....sieht auf den ersten Blick etwas
viel aus, dafür erspart es dir das Schreiben der ganzen Listen.
Du musst im Skript nur die ersten beiden Arrays mit deinen Werten füttern

In den Array "spieltage" kommen die Namen,welche bei dir bisher in den
einzelnen <select> stehen,

in den Array "teams", der Text der bisher in den <option>'s Stand...also die Namen der Teams.

Das erste Element des Arrays "teams" ist ein Dummie....da kannst du reinschreiben,
was du willst...was dort steht,erscheint dann in jeder Liste als erster Listeneintrag.
Das ist nötig,weil sonst in den Listen,wenn nix ausgewählt ist, in einigen Browsern das
erste Listenfeld automatisch als 'selected' eingestuft wird.

Wenn weitere Spieltage oder Teams hinzukommen,hänge die jeweiligen Sachen einfach an die
Arrays ran,der Rest geht von alleine.

Code:

<html>
<head>
<title>Titel</title>
</head>
<script language="JavaScript" type="text/javascript">
<!--
//Hier die Namen der select-Listen hinein
spieltage=new Array('home11','home12','home13','away11','away12','away13');

//Hier die Namen der Teams hinein
teams=new Array('____','Team 1','Team 2','Team 3','Team 4','Team 5','Team 6');

auswahl=new Array();

function disable(o)
{
var htm="";
df=document.formular;
if(!o)
  {
   for(a=0;a<spieltage.length;++a)
       {
       auswahl[a]=0;
       htm+='<select name="'+spieltage[a]+'"onchange="disable(this)"size="1">\n';
       for(b=0;b<teams.length;++b)
           {
              v=0;if(b>0){v='[id team'+b+']';}t=teams[b];
              htm+='<option value="'+v+'">'+teams[b]+'</option>\n';
           }
        htm+='</select>\n';
        }
     return htm;
   }
else
  {
  z=-1;
  n=o.name;
  sI=o.selectedIndex;
  sV=o.options[sI].value;
  for(s=0;s<spieltage.length;++s)
    {
    if(n==spieltage[s]&&z<0)
      {
      if(sI==0&&auswahl[s]==0){return;}
      else{z=s;break;}
      }
    }
    for(s=0;s<spieltage.length;++s)
      {
      if(n!=spieltage[s])
        {
        for(x=0;x<df.elements[spieltage[s]].options.length;++x)
          {
          if(sI!=0&&df.elements[spieltage[s]].options[x].value==sV)
            {
              df.elements[spieltage[s]].options[x]=null;
            }
          }
        if(auswahl[z]!=0)
          {
          df.elements[spieltage[s]].options[df.elements[spieltage[s]].options.length]=
          new Option(auswahl[z][0],auswahl[z][1]);
          }
        }
      }
    }
    if(sI==0){auswahl[z]=0;}
    else{auswahl[z]=new Array(o.options[sI].text,o.options[sI].value);}
}
//-->
</script>
<body>
<form name="formular">
<script>
<!--
//An dieser Stelle erscheinen später die Listen
document.write(disable(false));
//-->
</script>
</form>
</body>
</html>

Andreas Gaisbauer · 22. August 2003

Hallo,

Fatalus hat schon eine sehr sehr schöne Lösung geliefert, meine nur noch als Ergänzung (das ich sie nicht umsonst geschrieben habe

). Auf das dynamische schreiben der Selects ahb ich verzichtet. Bei fragen einfach Posten oder PN an mich...

Code:

<html>
<head>
  <script type="text/javascript">
      
      /*
       si = selectedIndex
       sn = selected Name
       sl = laenge des Arrays "selects"
       ssf = selected SelectField
       sv = selected Value
       csf = Current SelectField length
      */

      var teams = new Array('x','team1','team2','team3','team4','team5','team6');
      var selects = new Array('home11','home21','home31','away11','away21','away31');
     
      function delete_value(si,sn){
        var sl = selects.length;
        var ssf=0;
          while(sn!=selects[ssf]){
            ssf++;
          }
        var sv = document.forms[0].elements[ssf].options[si].value;
        for(x=0;x<sl;x++){
          if(x!=ssf){
            var csf = document.forms[0].elements[x].length;
            for(y=0;y<csf;y++){
              if(sv==document.forms[0].elements[x].options[y].value){
                document.forms[0].elements[x].options[y] = null;
                break;
              }
            }
          }
        }
      }
  </script>
</head>
<body>

<form name="test">
  <select name="home11" onchange="delete_value(this.selectedIndex,this.name)">
    <option value="x"></option>
    <option value="team1">Team 1</option>
    <option value="team2">Team 2</option>
    <option value="team3">Team 3</option>
    <option value="team4">Team 4</option>
    <option value="team5">Team 5</option>
    <option value="team6">Team 6</option>
  </select>
  
  <select name="home21" onchange="delete_value(this.selectedIndex,this.name)">
    <option value="x"></option>    
    <option value="team1">Team 1</option>
    <option value="team2">Team 2</option>
    <option value="team3">Team 3</option>
    <option value="team4">Team 4</option>
    <option value="team5">Team 5</option>
    <option value="team6">Team 6</option>
  </select>
  
  <select name="home31" onchange="delete_value(this.selectedIndex,this.name)">
    <option value="x"></option>
    <option value="team1">Team 1</option>
    <option value="team2">Team 2</option>
    <option value="team3">Team 3</option>
    <option value="team4">Team 4</option>
    <option value="team5">Team 5</option>
    <option value="team6">Team 6</option>
  </select>
  
  <select name="away11" onchange="delete_value(this.selectedIndex,this.name)">
    <option value="x"></option>
    <option value="team1">Team 1</option>
    <option value="team2">Team 2</option>
    <option value="team3">Team 3</option>
    <option value="team4">Team 4</option>
    <option value="team5">Team 5</option>
    <option value="team6">Team 6</option>
  </select>
  
  <select name="away21" onchange="delete_value(this.selectedIndex,this.name)">
    <option value="x"></option>
    <option value="team1">Team 1</option>
    <option value="team2">Team 2</option>
    <option value="team3">Team 3</option>
    <option value="team4">Team 4</option>
    <option value="team5">Team 5</option>
    <option value="team6">Team 6</option>
  </select>
  
  <select name="away31" onchange="delete_value(this.selectedIndex,this.name)">
    <option value="x"></option>
    <option value="team1">Team 1</option>
    <option value="team2">Team 2</option>
    <option value="team3">Team 3</option>
    <option value="team4">Team 4</option>
    <option value="team5">Team 5</option>
    <option value="team6">Team 6</option>
  </select>
</form>

</body>
</html>

ciao Andreas

Schind · 22. August 2003

genau so wollt ich das haben

vielen dank an euch beide, jetzt werd ich noch versuchen den code auch zu verstehen.

olli engel · 23. September 2003

kann man das auf eine auswahl begrenzen ?

hallo,

mit gnadenloaser erfolglosgkeit versuche ich das script auf meine bedürfnisse zu ändern.
da ich aber null plan von JC habe, hier meine "umbau frage" :

ich habe ein formular um sich bei einem clan-war anzumelden.
jetzt soll dort das spiel und die maps dazu ausgesucht werden via drop down.
wenn jetzt also spiel 1 gewählt wurde sollen nur noch maps von spiel ein zur weiteren auswahl stehen.
ich habe folgendes versucht :

Code:

  <script type="text/javascript">
     
      /*
       si = selectedIndex
       sn = selected Name
       sl = laenge des Arrays "selects"
       ssf = selected SelectField
       sv = selected Value
       csf = Current SelectField length
      */

      var teams = new Array('x','Spiel 1','Spiel 2');
      var selects = new Array('home11','home21','home31');
     
      function delete_value(si,sn){
        var sl = selects.length;
        var ssf=0;
          while(sn!=selects[ssf]){
            ssf++;
          }
        var sv = document.forms[0].elements[ssf].options[si].value;
        for(x=0;x<sl;x++){
          if(x!=ssf){
            var csf = document.forms[0].elements[x].length;
            for(y=0;y<csf;y++){
              if(sv==document.forms[0].elements[x].options[y].value){
                document.forms[0].elements[x].options[y] = null;
                break;
              }
            }
          }
        }
      }
  </script>
</head>
<body>

<form name="test">
  <select name="home11" onchange="delete_value(this.selectedIndex,this.name)">
    <option value="x">Select</option>
    <option value="Spiel 1">Spiel 1</option>
    <option value="Spiel 2">Spiel 2</option>
  </select>
  
  <select name="home21" onchange="delete_value(this.selectedIndex,this.name)">
    <option value="x">Select</option>    
    <option value="Spiel 1">Spiel 2 Map 1</option>
    <option value="Spiel 1">Spiel 2 Map 2</option>
    <option value="Spiel 2">Spiel 1 Map 1</option>
    <option value="Spiel 2">Spiel 1 Map 2</option>
  </select>
  
  <select name="home31" onchange="delete_value(this.selectedIndex,this.name)">
    <option value="x">Select</option>
    <option value="Spiel 1">Spiel 2 Map 1</option>
    <option value="Spiel 1">Spiel 2 Map 2</option>
    <option value="Spiel 2">Spiel 1 Map 1</option>
    <option value="Spiel 2">Spiel 1 Map 2</option>
  </select>
</form>

damit versuchte ich das ganze umzudrehen. also "spiel 1" wird gewählt und alles mit dem value "spiel 1" wird ausgeblendet.
soweit so gut, aber leider blendet er nur das erste value aus "<option value="Spiel 1">Spiel 2 Map 1</option>" nummer 2 "<option value="Spiel 1">Spiel 2 Map 2</option>" bleibt stehen. auch sonst fliegt mir das script wegen der doppelten values nur noch um die ohren.
kann mir einer von euch da weiterhelfen ?

danke und gruß, oliver
leider führt das zu keinem erfolg.

Sven Mintel · 24. September 2003

Das Problem ist das "break;" in der Schleife...der Durchlauf derselben wird dann abgebrochen....
dadurch dann die andere Option nicht mehr entfernt.
Das pure Entfernen des break's reicht auch nicht,dann gäbe es einen Fehler,weil du die Anzahl der
Optionen verringerst,und in der Schleife dann auf nicht vorhandene Optionen zugreifen willlst.

Die Lösung....die Optionen vom Ende her durchlaufen,dann kannst du sie problemlos entfernen.

Es gibt aber noch ne andere Sache,die dabei nnicht hinhaut....sobald du die Optionen entfernst,
sind sie komplett weg...will man sich für ein anderes Spiel entscheiden,bekommt man die Optionen
dafür nicht mehr zurück.
Und das mit den doppelten values...fürs Skript ist das kein Problem,aber es macht keinen Sinn.
Wenn bspw.[Spiel 2 Map 1] und [Spiel 2 Map 2] bekommst du auf der Zielseite nicht mehr heraus,
welche Map nun gewählt wurde.....daher brauchst du unterschiedliche values.

Ich habs mal soweit verändert,dass diese Sache behoben sind.
Die entfernten Optionen werden dabei in Arrays zwischengelagert....und halt unterschiedliche Values,
jeweils nach dem Schema "s[Spielnummer]_m[Mapnummer]"

Code:

<html>
<head>

<script type="text/javascript">
<!--
var lists=new Array();
lists['home11']=false;
lists['home21']=new Array();
lists['home31']=new Array();


function delete_value(o)
{

var FRM=document.test;
vv=o.options[o.options.selectedIndex].value;
vv=vv.split('_');vv=vv[0];

for(var k in lists)
   {
      if(!lists[k])
         {
            for(i=0;i<FRM.elements[k].options.length;++i)
              {
                 if(FRM.elements[k].options[i].value==vv)
                    {
                       FRM.elements[k].options[i].selected=true;
                       break;
                    }
              }
         }
      else
         {
            for(i=0;i<lists[k].length;++i)
               {
                  FRM.elements[k].options[FRM.elements[k].options.length]=lists[k][i];
               }
               lists[k].length=0;
               for(i=FRM.elements[k].options.length-1;i>=0;--i)
                  {
                  xV=FRM.elements[k].options[i].value;
                  xV=xV.split('_');xV=xV[0];
                  if(xV!=vv&&xV!='x'&&vv!='x')
                     {
                     lists[k][lists[k].length]=
                     new Option(FRM.elements[k].options[i].text,FRM.elements[k].options[i].value);
                     FRM.elements[k].options[i]=null;

                     }
                  }
               }
         }
}
//-->
</script>
</head>
<body>

<form name="test">
  <select name="home11" onchange="delete_value(this)"size="6">
    <option value="x">Select</option>
    <option value="s1">Spiel 1</option>
    <option value="s2">Spiel 2</option>
  </select>

  <select name="home21" onchange="delete_value(this)"size="6">
    <option value="x">Select</option>
    <option value="s2_m1">Spiel 2 Map 1</option>
    <option value="s2_m2">Spiel 2 Map 2</option>
    <option value="s1_m1">Spiel 1 Map 1</option>
    <option value="s1_m2">Spiel 1 Map 2</option>
  </select>

  <select name="home31" onchange="delete_value(this)"size="6">
    <option value="x">Select</option>
    <option value="s2_m1">Spiel 2 Map 1</option>
    <option value="s2_m2">Spiel 2 Map 2</option>
    <option value="s1_m1">Spiel 1 Map 1</option>
    <option value="s1_m2">Spiel 1 Map 2</option>
  </select>
</form>
</body>
</html>

Mehrere Drop Down-Menüs - gleicher Inhalt

Schind

Mitglied

Sven Mintel

Mitglied

Andreas Gaisbauer

Erfahrenes Mitglied

Schind

Mitglied

olli engel

Sven Mintel

Mitglied

Neue Beiträge