[Erledigt] disable/hide Selectbox

Bravestar2010 · 07.02.2011, 15:34

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.

PHP-Code:

  <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

nikosch · 07.02.2011, 15:43

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

Bravestar2010 · 07.02.2011, 15:55

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.

nikosch · 07.02.2011, 15:59

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.

Bravestar2010 · 07.02.2011, 16:02

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

nikosch · 07.02.2011, 16:13

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.

Bravestar2010 · 07.02.2011, 16:20

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.

nikosch · 07.02.2011, 17:06

PHP-Code:

  <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.

Bravestar2010 · 07.02.2011, 17:44

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

PHP-Code:

  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.

Chriz · 07.02.2011, 20:08

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:

Code:

<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";
  }
}

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Datenbankabfrage, Selectbox	Kri	PHP Einsteiger	13	02.12.2010 15:41
Selectbox Wert an MYSQL Tabelle übergeben	Muchi123	PHP Tipps 2010	6	07.09.2010 12:54
Select aus DB nach einem Array einer Merhfachauswahl einer Selectbox	litterauspirna	PHP Tipps 2010	8	05.06.2010 22:09
mehrdimensonales Array in SelectBox einlesen	chandlerP	PHP Tipps 2010	10	01.06.2010 01:32
[Erledigt] Werte aus einer Selectbox an mehrere Input-Felder übergeben?	Farlif	JavaScript, Ajax und mehr	2	18.03.2010 13:42
[Erledigt] PHP, MySQL und Selectbox	ePole	PHP Tipps 2009	6	26.08.2009 09:26
Selectbox Problem	Bogohl	PHP Tipps 2009	4	15.04.2009 16:44
Sortierung Selectbox	Pillemon	PHP Tipps 2009	7	05.01.2009 10:02
[Erledigt] Ajax.Autocomplete: Ergebnisse in einer Selectbox	dragon013	JavaScript, Ajax und mehr	1	18.09.2008 09:15
[Erledigt] Daten aus DB-gefüllter Selectbox weiterbearbeiten	Ati	PHP Tipps 2008	12	01.09.2008 16:32
selectbox durch checkbox aktivieren		HTML, Usability und Barrierefreiheit	1	13.04.2006 00:23
Eine Selectbox leeren und ne andere auffüllen	Igäl	HTML, Usability und Barrierefreiheit	2	16.06.2005 14:49
JS - Überprüfen einer SelectBox	patr1k	HTML, Usability und Barrierefreiheit	1	31.05.2005 12:10
problem mit selectbox		PHP Tipps 2005	1	17.03.2005 12:26

07.02.2011, 15:34
Bravestar2010 Benutzer Registriert seit: 14.12.2010 Beiträge: 51 PHP-Kenntnisse: Anfänger	[Erledigt] disable/hide Selectbox 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. PHP-Code: `<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


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

07.02.2011, 15:43
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Semikolons wären schon mal ein guter Anfang. Und das nächste sollte ein Blick in die Javascript-Konsole sein. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

07.02.2011, 15:55
Bravestar2010 Benutzer Registriert seit: 14.12.2010 Beiträge: 51 PHP-Kenntnisse: Anfänger	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. Geändert von Bravestar2010 (07.02.2011 um 15:58 Uhr).

07.02.2011, 15:59
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	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. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

07.02.2011, 16:02
Bravestar2010 Benutzer Registriert seit: 14.12.2010 Beiträge: 51 PHP-Kenntnisse: Anfänger	Ja mit CSS kenne ich mich rudimentär aus. Hatte gedacht, dass dies mit JS in einem 2 Zeiler zu erledigen wäre.

07.02.2011, 16:13
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	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. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

07.02.2011, 16:20
Bravestar2010 Benutzer Registriert seit: 14.12.2010 Beiträge: 51 PHP-Kenntnisse: Anfänger	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.

07.02.2011, 17:06
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	PHP-Code: <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. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

07.02.2011, 17:44
Bravestar2010 Benutzer Registriert seit: 14.12.2010 Beiträge: 51 PHP-Kenntnisse: Anfänger	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 PHP-Code: `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.