[Erledigt] disable/hide Selectbox

[Forumsgast]

Hallo zusammen,

ich habe nun mittlerweile zig Varianten aus dem Netz probiert, aber irgendwie scheint nichts brauchbares dabei zu sein.

Problem:
ich habe zwei Selectboxen, wobei die zweite Selectbox beim laden der Seite erstmal deaktiviert/oder ausgeblendet sein soll.
Erst nachdem man in der ersten Selectbox einen Eintrag mit einem Wert ausgewählt hat, soll die zweite Box dann aktiviert bzw. sichtbar werden.

<script type="text/javascript">
function disable(){
    var x=document.getElementById("test")
    x.disabled = true
}
function enable(){
    var x=document.getElementById("test")
    x.disabled = false
}
</script> 

Hier bin ich schlußendlich stecken geblieben.
Wüsste es aber leider mit JS nicht umzusetzen.

Ob mir da jemand vielleicht etwas unter die Arme greifen könnte?

Vielen lieben Dank schonmal für die bis dato investierte Zeit.

Gruß
Brave

[Forumsgast]

Semikolons wären schon mal ein guter Anfang. Und das nächste sollte ein Blick in die Javascript-Konsole sein.

[Forumsgast]

Hallo nikosch,

vielen Dank für Deine Antwort.
Ich entschuldige mich direkt mal für meine deletantische Art und Weise den Code hier reingestellt zu haben.

Ich habe mir dieses Beispiel aus dem Netz geholt
Beispiel

da ich der Meinung war, dass dies wohl am ehesten meinem Problem helfen könnte. (Mal abgesehen davon, dass ich keine Submits nutze).

Mit Deiner Antwort komme ich nun nicht allzuweit. Ich habe gerade erst das Thema PHP angefangen und wollte eigentlich ein "dualmodus" vermeiden.
Also JS und PHP gleichzeitig zu lernen. Daher dachte ich, dass mir vlt. jemand einen Hinweis geben könnte.

Ich habe mir auch schon den Quellecode zu dieser Lösung heruntergeladen
Selectboxes
Das wäre auch die ideale Lösung, nur macht das mal wieder viel zu viel.
Will ja nicht aufgrund einer AUswahl die 2.Selectbox füllen, sondern nur aktivieren.

[Forumsgast]

Vielleicht kennst Du Dich halbwegs mit CSS aus. Dann würde ich Dir zu jQuery raten. Das ist immer noch JS, vereinfacht aber gängige Prozesse wesentlich.

[Forumsgast]

Ja mit CSS kenne ich mich rudimentär aus.
Hatte gedacht, dass dies mit JS in einem 2 Zeiler zu erledigen wäre.

[Forumsgast]

Das Problem ist, dass es "erst wenn gewählt" nicht gibt in Selects (es gibt keinen nicht gewählt Zustand). Ein Umweg wäre onChange in Kombination mit der Abfrage des aktuellen Wertes, das bekommst Du aber nicht in einen Einzeiler.

[Forumsgast]

Mit dem onchange "experimentiere" ich ja die ganze Zeit herum. Auch lese ich immer wieder von dieser Art der "manipulation".

Ich habe hier einen Beitrag gefunden gehabt, der ja schon fast perfekt wäre.
Beispiel 3 Selectboxen

Nur ist dieses Beispiel nicht ganz so richtig, da meine SELECTS zwei verschiedene Namen besitzen und dort einfach nur hochgezählt wird.

Könnte man so was nicht "anpassen" und "einbauen" ? Scheint mir ein einfaches aber effektives Beispiel zu sein.

[Forumsgast]

<style>
  .hidden {
    display:none;
  }
</style>

<select name="foo">
  <option value="">- bitte wählen -</option>
  <option>foo</option>
</select>

<select name="bar" class="hidden">
  <option value="">- bitte wählen -</option>
  <option>bar</option>
</select>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">

var selectName1 = 'foo';
var selectName2 = 'bar';
var emptyValue   = '';

$(function () {
  
  var select1 = $('select[name="' + selectName1 + '"]');
  var select2 = $('select[name="' + selectName2 + '"]');

  select1.change (function () {
    select2.toggleClass ('hidden' , emptyValue == $(this).val ());
  });

});

</script> 

Bitte HTML ergänzen.

[Forumsgast]

Hallo nikosch,

das war jetzt aber nicht nötig.
Wollte eigentlich keinen vorgefertigten Quelltext hier "erschleichen".
Vielen Dank ersteinmal für Deine Mühen.

Wollte mir das selbst Schritt für Schritt erarbeiten und fasse mal eben zusammen.
Ich definiere mir ein CSS mit .hidden
Dann verknüpfe ich die jQuery
Dann definiere ich die Selectboxen und die Values ("= leer")

Die Funktion verstehe ich nicht so ganz. Ich sehe zwar was sie macht, aber bin unsicher wie es dazu kommt.
Definieren der var Select1 und Select2 und zu guter letzt die Befehlszeile die das hidden aufhebt?

Wenn ich nun schon ein

onchange="document.formname.submit(); 

in den select integriert habe, dann habe ich aber ein Problem, denn dann erscheint die Selectbox nur kurz und verschwindet direkt wieder.

[Forumsgast]

Hallo,

versteck doch das zweite <select>-Feld mit CSS, "display:none". Wenn du jetzt im ersten eine gültige Auswahl vornimmst, zeigst du es an:

<select id="select-1" onchange="handleSelection(this)"> .. </select>
..
<select id="select-2"> .. </select>

// CSS:
select#select-2 {
  display: none;
}

// JS:

function handleSelection(select1) {
  var value   = select1.options[select1.selectedIndex].value;
  var select2 = document.getElementById("select-2");
  if (value > 0) {
    select2.display = "block";
  } else {
    select2.display = "none";
  }
}

[Forumsgast]

Hat mich drei Minuten gekostet, kein Problem. Solche Sachen sind leider schwer einzeln zu vermitteln. Kurz zur Erläuterung:

-Der Code benutzt jQuery, wie oben empfohlen.
-$(function () {}); ist der bodyLoad-Handler von jQuery, der garantiert, dass bei der Ausführung alle benötigten HTML-Teile existieren
-class benutze ich, damit man auch die "Versteckt"-Ansicht zentral im Stylesheet definieren kann
- var select1 = $('select[name="' + selectName1 + '"]'); Zugriff auf die Selects über die vorkonfigurierten Namen. Abspeichern in einer Variablen
-
select1.change (function () {
select2.toggleClass ('hidden' , emptyValue == $(this).val ());
});

übersetzt: Bei Veränderung (onChange) von Select1 "toggele"*) das class-Attribut "hidden" von Select2.

*) togglen bedeutet ein- und ausschalten bzw. hinzufügen und entfernen. In diesem Fall wird an/aus über einen boolschen Parameter bestimmt, der wiederum von einem Vergleich abhängt: Prüfe den aktuell gewählten Select-Wert gegen einen konfigurierten NULL-Wert.

[Forumsgast]

Hallo nikosch,

vielen lieben Dank für die Erklärung. Damit kann ich etwas anfangen.
Auch danke ich Dir für den damit verbundenen Zeitaufwand.

Das klappt soweit auch ganz gut.
Wenn ich jetzt nur nicht das Problem hätte,
dass ich schon ein onchange Ereignis in den Selects aufrufe.

<select name="action" onchange="document.test.submit();" class="hidden" > 

Dadurch entsteht ein komisches Phänomen.
Die Selectbox erscheint für einen kurzen Augenblick und verschwindet dann wieder.
Nehme ich das onchange Ereignis heraus, funktioniert zwar die "Hidden" Funktion, aber der Rest "steht" still.
Ich benötige aber das onchange Ereignis um das Formular abzusenden, damit ich Werte weiterverarbeiten kann.
Kann man das irgendwie miteinander verknüpfen, so dass beide Funktionen miteinander interagieren?

Nochmals vielen Dank
Brave

[Forumsgast]

Ja. DU musst dazu wissen, dass onchange als inline-Attribut nicht kombinierbar ist. Deswegen muss dessen Funktion genauso wie das andere Change oben zugewiesen werden. jQuery kann das verwalten.

also onchange="..." raus und Code abändern:

  select1.change (function () {
    select2.toggleClass ('hidden' , emptyValue == $(this).val ());
    document.test.submit();
  });

  select2.change (document.test.submit); 

Allerdings finde ich die Logik fragwürdig. Wenn dort erst geblendet wird, kann das Form doch noch nicht abgesendet werden. Dann kann ich doch gar nichts mehr aus Sel2 auswählen?!

[Forumsgast]

Die Logik dahinter ist folgende:
Im ersten Select kann ich eine Hauptkategorie wählen. (in meinem Fall eine Liga)
Habe ich dann eine entsprechende Liga ausgewählt wird
die zweite Selectbox Aufgrund der ausgewählten Hauptkategorie u.a. mit Unterkategorien. (in meinem Fall die zu dieser Liga gehörenden Teams) aufgefüllt.

Dort wiederum nutze ich die Einträge um eine Ausgabe zu filtern.

Das ist eigentlich schon alles.

[Forumsgast]

der wichtigste Punkt dabei ist aber das Absendeverhalten