Problem mit Selectboxen

[MacMurdock]

Hallo, ich bin Webdesign Neuling, kenne mich nur mässig mit Html und CSS aus und habe ein Problem für dessen Lösung ich wahrscheinlich Javascript oder PHP benötige.
Auf meiner Seite gibt es 2 Selectboxen. Die 2te Selectbox soll solange inaktiv dargestellt werden (transparent) bis man eine Option aus der ersten Selectbox auswählt. Ist das irgendwie möglich?
Bitte Anfängerfreundliche Lösungsvorschläge

Danke!

 

[Gilles]

Das ist zum Beispiel mit JS möglich.
Ich werde dir mal eine Funktion schreiben. Ich rate dir dennoch dich selbst mal mit Javascript zu beschäftigen.

function SelectManager(id1, id2, initvalue) {
var init = (initvalue) ? initvalue : "-";
var select1 =   document.getElementById(id1);
var select2 =   document.getElementById(id2);

select1.onchange = function() {
   if(this.value == init) {
      select2.style.display = "none";
   } else {
       select2.style.display = "block";
   }

  
};

}

und dann im html

<select id="firstSelect">
  <option>-</option>
  <option>Test</option>
</select>
<select id="secondSelect" style="display:none">
  <option>Test2</option>
</select>

<script type="text/javascript">
   // Hier kommt die Funktion von oben hin

  //nun aufrufen
  SelectManager("firstSelect", "secondSelect");
</script>

 

[MacMurdock]

Erstmal danke für die Hilfe!

Bei mir sieht es so aus und leider tut sich nicht wirklich was, die 2te selectbox wird sogar nicht mal mehr angezeigt.

    <form name="prod_search" method="get" action="index.php">
                        <select name="m3_leistungen" id="firstSelect" class="shop">
                            <option value="no_selection">- test-</option>
                            <opti                                    
                        </select>
                        <select name="m3_branche" id="secondSelect" style="display:none" class="shop">
                            <option value="no_selection">- Branche -</option>
                            <option value="9">test</option>                                     
                        </select>
                        
                        <script type="text/javascript">
                        function SelectManager(id1, id2, initvalue) {
                        var init = (initvalue) ? initvalue : "-";
                        var select1 =   document.getElementById(id1);
                        var select2 =   document.getElementById(id2);
                        
                        select1.onchange = function() {
                           if(this.value == init) {
                             select2.style.display = "none";
                           } else {
                              select2.style.display = "block";
                           }
                        
                          
                        };
                        
                        }
                        
                        SelectManager("firstSelect", "secondSelect");
                        </script>

Was stimmt da nicht bzw. fehlt?

 

[Gilles]

Ach du wolltest die nur disabled haben. Das geht natürlich auch.
Das Script hat jedoch wunderbar bei mir funktioniert was ich dir gegeben habe. Wenn man einen Wert ausgewählt hat, der nicht der no_selection Value ist ist die 2. Box erschienen.
Aber du hast auch eine Option nicht ganz zu Ende geschrieben im 1. Select.
Hier mal der Code wie es mit der disabled Funktion aussieht:

<form name="prod_search" method="get" action="index.php">
    <select name="m3_leistungen" id="firstSelect" class="shop">
        <option value="no_selection" selected="selected">- test-</option>
        <option>Test</option>                                    
    </select>
    <select name="m3_branche" id="secondSelect" disabled="true" class="shop">
        <option value="no_selection" selected="selected">- Branche -</option>
        <option value="9">test</option>                                     
    </select>
    
    <script type="text/javascript">
    function SelectManager(id1, id2, initvalue) {
    var init = (initvalue) ? initvalue : "-";
    var select1 =   document.getElementById(id1);
    var select2 =   document.getElementById(id2);
    
    select1.onchange = function() {
       if(this.value == init) {
         select2.disabled = true;
       } else {
          select2.disabled = false;
       }    
      
    };
    
    }
    
    SelectManager("firstSelect", "secondSelect", "no_selection");
    </script>

 

[MacMurdock]

Ja, die Option ist beim kopieren wohl teilweise verschwunden.

Auf jeden Fall klappt es jetzt genauso wie ich mir das vorgestellt hab, ich danke dir vielmals für deine verständliche und unkomplizierte Hilfe!