Select - Option disablen

CorinG · #1 (**permalink**) 28.07.2008, 16:10

Hallo again,

ich bin leicht am verzweifeln:
Ich habe mehere <select>´s mit gleichem Inhalt. Wenn man einen anklickt soll überprüft werden, ob bei einem anderen eine Antwort ausgewählt ist und falls dies der Fall ist, diese Antwort disabled werden.

(Bsp: 3 DropDownMenüs mit folgenden options: "nicht besetzt", "Frank", "Hans", "Peter". Alle stehen anfangs auf "nicht besetzt". Beim 1. wird "Frank" ausgewählt. Bei einem Klick auf das 2. soll "Frank" disabled sein.)

Dazu hab ich folgendes geschrieben:

Code:

<select onfocus='setChoise(3, "Pos", 0);' class='name' id='Pos0'>  
  <option>nicht besetzt</option><option disabled>Ferdinand Cero</option> 
  <option disabled>Gerem</option> 
  <option disabled>Zykoi</option> 
  <option disabled>Bremer</option> 
  <option disabled>Juffi</option>  
</select><br> 

<select onfocus='setChoise(3, "Pos", 1);' class='name' id='Pos1'>  
  <option>nicht besetzt</option><option disabled>Ferdinand Cero</option> 
  <option disabled>Gerem</option> 
  <option disabled>Zykoi</option> 
  <option disabled>Bremer</option> 
  <option disabled>Juffi</option> 
</select><br> 

<select onfocus='setChoise(3, "Pos", 2);' class='name' id='Pos2'>  
  <option>nicht besetzt</option><option disabled>Ferdinand Cero</option> 
  <option disabled>Gerem</option> 
  <option disabled>Zykoi</option> 
  <option disabled>Bremer</option> 
  <option disabled>Juffi</option> 
</select><br>

Jedem Select wurde also eine JS-Function bei onfocus zugewiesen, doch dabei klappt was nicht. Ich weiß nicht ob es am falschen Event liegt oder am Script:

Code:

setChoise(AnzSelects, Position, myID)
  {
    var ID= Position + myID;
    var x = window.document.getElementById(ID);
    //Jedes Element (x.length)...
    for (i=0; i<x.length; i++)
    {
      //wird mit jedem anderen Select verglichen
      for (j=0; j<=AnzSelects; j++)
      {

        ID = Position + j;
        //falls es sich nicht um das eigene select handelt ...
        //UND die option =  selektierte auswahl eines anderen selects 
        if ((myID != i) AND (x.options[i] == document.getElementByID(ID).selectedIndex)) 
        {
          x.option[i].disabled = true;
        }
      }
    }
  }

Das Script ermittelt die Länge des aktiven Selects. Für jeden Eintrag wird eine Schleife durchlaufen, in der der Eintrag mit den selektierten Antworten, der anderen (abgesehen von einer Nummer) gleichnamigen Selects. Wenn der selektierte Wert = dem Eintrag ist und es sich nicht um das selbe Select handelt, soll der Eintrag disabled werden.

Hoffe ich hab mich einigermaßen verständlich ausgedrückt.
Bin für jede Hilfe dankbar,
Corin

Timo · #2 (**permalink**) 28.07.2008, 20:49

Du solltest den Event Handel onchange nehmen.

CorinG · #3 (**permalink**) 29.07.2008, 00:30

Danke für den Tip. Hab das JavaScript allerdings noch ein paar mal getestet und einige Fehler gefunden. Zudem hab ich irgendwie den Eindruck gewonne, es sei nicht möglich, mit JS die "options" zu disablen (kann aber auch gut sein, dass ich mich irre).

Ich bin dem Problem jetzt auf andere Weise aus dem Weg gegangen.
Danke trotzdem,
Corin

Timo · #4 (**permalink**) 29.07.2008, 11:35

Also onchange ist wichtig. Und deaktivieren geht auch.

Ist das eine Variable Anzahl von select-felder?

CorinG · #5 (**permalink**) 29.07.2008, 11:50

genau: x.length ist für den Durchlauf der Einträge des aktiven Select-Felds.
AnzSelects ist die Anzahl der Selectfelder mit gleichen Einträgen.

"x.options[i] == document.getElementByID(ID).selectedIndex" ist falsch, da options[i] ein HTML Objekt ist und selectedIndex offensichtlich ein Index (Integer). Richtig wäre es denke ich so:

Code:

var Selected = document.getElementByID(ID).selectedIndex;
Selected = document.getElementByID(ID).options[Selected].value

if ((myID != i) AND (x.options[i].value == Selected)) 
{
  x.option[i].disabled = true;
}

Gruß,
Corin

Timo · #6 (**permalink**) 29.07.2008, 13:01

Du müsstest den option auch einen value geben wenn du den abfragen willst

CorinG · #7 (**permalink**) 29.07.2008, 13:57

meinst du <option ... value="bla"></option> ?
Wenn ja - das ist bereits der fall.

hemfrie · #8 (**permalink**) 29.07.2008, 15:36

Hallo,

hab mal ein kleines Beispiel mit Hilfe von jQuery gemacht. (finde die Syntax von jQuery einfach übersichtlichter)

Javascript (php-code wurde nur wegen des Syntax-Highlighting vewendet)

PHP-Code:


			
  $(document).ready(function(){
    $("select[@id*='Pos']").change(function(){
      $(":disabled").removeAttr("disabled"); //Entfernt erstmal alle disabled-Attribute  
  
      $(":selected").each(function(){
        var selected = $(this).val(); //Wert der selektierten Option        
        $("option:contains('"+selected+"')").attr("disabled","disabled"); // Alle option-Elemente mit dem Wert von "selected" erhalten ein disabled-Attribut      
      });      
    });
  });

Code:

<select class='name' id='Pos0'>  
  <option>nicht besetzt</option><option>Ferdinand Cero</option> 
  <option>Gerem</option> 
  <option>Zykoi</option> 
  <option>Bremer</option> 
  <option>Juffi</option>  
</select><br> 

<select class='name' id='Pos1'>  
  <option>nicht besetzt</option><option>Ferdinand Cero</option> 
  <option>Gerem</option> 
  <option>Zykoi</option> 
  <option>Bremer</option> 
  <option>Juffi</option> 
</select><br> 

<select class='name' id='Pos2'>  
  <option>nicht besetzt</option><option>Ferdinand Cero</option> 
  <option>Gerem</option> 
  <option>Zykoi</option> 
  <option>Bremer</option> 
  <option>Juffi</option> 
</select><br>

Demo:
http://xhtmlforum.de/test_docs/jquery/select.html

hemfrie · #9 (**permalink**) 29.07.2008, 16:45

Das ganze wird übrigens nicht im IE7 funktionieren. Das Attribut "disabled", dass einem option-tag zugeordnet wird, hat dort keinerlei Wirkung.

CorinG · #10 (**permalink**) 29.07.2008, 19:26

Hej hemfrie,
Vielen Dank für deine Hilfe - klappt ausgezeichnet! Für das Problem mit dem IE hatte ich auf Daniel Tome´s Blog ein Workaround gefunden.

Nochmals Danke und freundliche Grüße,
Corin

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
2x select boxen sollen option tauchen.(Javascript)	Don Roberto	Javascript & Ajax	4	28.12.2009 21:01
Jquery Select und Option	123merlin	Javascript & Ajax	0	19.11.2009 18:58
Problem mit select option	phplerin	Serveradministration und serverseitige Scripte	10	03.02.2009 17:18
jQuery: Select option und click	Sonny Lane	Javascript & Ajax	3	17.12.2008 10:09
Select und Option -> Ich finde den Fehler nicht	smiley	(X)HTML	2	12.04.2006 02:36