Select che abilita altra select

[Giubass]

Ciao Ragazii volevo un piccolo aiutino, come da titolo vorrei abilitare e disabilitare una select da un altra select, posto il codice:

function Attiva(){
if( document.getElementById('Categoria').???????){
document.getElementById('Sub_Categoria').disabled=true;
}else{
document.getElementById('Sub_Categoria').disabled=false;
}

<select name="Categoria" size="1" id="Categoria" onchange="Attiva();">
<option value="-1" selected="selected">- Seleziona -</option>
<option value="1">Prova 1</option>
<option value="2">Prova 2</option>
</select>

<select name="Sub_Categoria" size="1" id="Sub_Categoria" onchange="Attiva();">
<option value="-1" selected="selected">- Seleziona -</option>
<option value="1">Prova 1</option>
<option value="2">Prova 2</option>
</select>

In sostanza vorrei abilitare la seconda select solo dopo aver selezionato almeno un valore della prima select, avevo provato a scrivere una funzione ma non so come recuperare document.getElementById('Categoria').???????


Grazie

[artorius]

var sel = document.getElementById('Categoria');
if(sel.options[sel.selectedIndex].value != '-1'){
   //attiva
}
else{
   //Disattiva
} 

allora, le select hanno l'attributo "selectedIndex" che contiene l'indice dell'elemento selezionato e l'attributo "options" che contiene un array con le option della select.
Quindi select.options[select.selectedIndex] per ottenere l'option selezionata, poi fai .vaule per ottenere il valore.

[Giubass]

Dovrei fare quindi così?

function Attiva(){
var sel = document.getElementById('Categoria'); 
if(sel.options[sel.selectedIndex].value != '-1'){
document.getElementById('Sub_Categoria').disabled=false;
}else{
document.getElementById('Sub_Categoria').disabled=true;
}

[artorius]

si, praticamente, si.
Comunque, sub_categoria non deve avere l'evento onchange

[Giubass]

Ho provato così ma non funge

function Attiva(){
var sel = document.getElementById('Categoria'); 
if(sel.options[sel.selectedIndex].value != '-1'){
document.getElementById('Sub_Categoria').disabled=false;
}else{
document.getElementById('Sub_Categoria').disabled=true;
}

<select name="Categoria" size="1" id="Categoria" onchange="Attiva();">
<option value="-1" selected="selected">- Seleziona -</option>
<option value="1">Prova 1</option>
<option value="2">Prova 2</option>
</select>

<select name="Sub_Categoria" size="1" id="Sub_Categoria" disabled>
<option value="-1" selected="selected">- Seleziona -</option>
<option value="1">Prova 1</option>
<option value="2">Prova 2</option>
</select>

[artorius]

probabilmente perché manca una parentesi...

<script type="text/javascript">
function Attiva(){
    var sel = document.getElementById('Categoria'); 
    if (sel.options[sel.selectedIndex].value != '-1') {
        document.getElementById('Sub_Categoria').disabled = false;
    }
    else {
        document.getElementById('Sub_Categoria').disabled = true;
    }
}
</script>

<select name="Categoria" id="Categoria" onchange="Attiva();">
    <option value="-1" selected="selected">- Seleziona -</option>
    <option value="1">Prova 1</option>
    <option value="2">Prova 2</option>
</select>

<select name="Sub_Categoria" size="1" id="Sub_Categoria" disabled="true">
<option value="-1" selected="selected">- Seleziona -</option>
<option value="1">Prova 1</option>
<option value="2">Prova 2</option>
</select> 

[Giubass]

Grazie artorius avevi proprio ragione.

[Tobler]

Ciao ragazzi, mi aggiungo a questo topic per chiedere soluzione relativa alle select.

Mi ritrovo nella stessa situazione di Giubass con una variante: la mia seconda select non viene abilitata, bensì caricata via Ajax.
Ora, mi piacerebbe che se il valore della prima sia diverso da quello necessario per la comparsa della seconda, questa... scompaia

Avete qualche piccolo suggerimento a riguardo?

[homezappa]

Funziona, fuunziona, solo che ti sei 'scordato' una parentesi graffa chiusa!
Impara a indentare:

function Attiva(){
    var sel = document.getElementById('Categoria'); 
    if(sel.options[sel.selectedIndex].value != '-1'){
        document.getElementById('Sub_Categoria').disabled=false;
    }else{
        document.getElementById('Sub_Categoria').disabled=true;
    }
}   // <-- mancava qua, la graffa chiusa!

HTH
Zappa

[artorius]

@Tobler

Se hai già la funzione, quando fai il controllo del valore (per intenderci il sel.options[sel.selectedIndex].value ) metti:

var toRem = document.getElementById('Sub_Categoria');
toRem.parentNode.removeChild(toRem); 

Chiaramente, nell'altro caso, dovrai rimetterla completamente, inserendola nel document.

Altrimenti potresti solo nasconderla con:

var toRem = document.getElementById('Sub_Categoria');
toRem.style.display = 'none';