L'utilisation de Javascript pour masquer et d'afficher le menu déroulant et champ de texte

Dans le menu déroulant suivant, lorsqu'un utilisateur sélectionne l'opération Non, je veux que la prochaine menu déroulant affiché 

<select id="OperationType" onChange="check(this);">
 <option value="OpNo">Operation No</option>
 <option value="OpEmp">Employee No</option>
</select>

<select id=OperationNos>
 <option value="1001">1001</option>
 <option value="1002">1002</option>
</select>

Si l'utilisateur sélectionne employé non, je veux le dernier menu déroulant pour être caché et le champ de texte suivant montré jusqu':

<input type='text'>

Ce que j'ai fait est que j'ai mis le script suivant, mais il ne cache pas qu'aucun de ces deux éléments:

function check(elem) {
    document.getElementById('OperationType').disabled = !elem.selectedIndex;
}

Il ne l'a désactivé. Je veux qu'il soit invisible.
Grâce

InformationsquelleAutor Nasser | 2013-04-07
  1. 6

    Ajouter un style="display: none" à votre OperationNos sélectionner:

    Vous n'avez pas besoin de passer this à vérifier().

    Et modifier votre fonction pour basculer cette propriété css si "OpNo" est sélectionné:

    function check() {
    var dropdown = document.getElementById("OperationType");
    var current_value = dropdown.options[dropdown.selectedIndex].value;

    if (current_value == "OpNo") {
        document.getElementById("OperationNos").style.display = "block";
    }
    else {
        document.getElementById("OperationNos").style.display = "none";
    }
}

    Exemple: http://jsfiddle.net/2pna2/

    InformationsquelleAutor sman591
  2. 2

    Utiliser ceci:-

    function hideshow()
{
var s1= document.getElementById('OperationType');
var s2= document.getElementById('OperationNos');

if( s1.options[s1.selectedIndex].text=="Operation No")
{
s2.style.visibility = 'visible';
document.getElementById('t1').style.visibility = 'hidden';
}
if( s1.options[s1.selectedIndex].text=="Employee No")
{
s2.style.visibility = 'hidden';
document.getElementById('t1').style.visibility = 'visible';
}
}
function hide()

{

document.getElementById('t1').style.visibility = 'hidden';
}

    Code Html:-

    <body onload="hide()">

<select id="OperationType" onChange="hideshow()">
 <option value="OpNo">Operation No</option>
 <option value="OpEmp">Employee No</option>
</select>

<select id="OperationNos">
 <option value="1001">1001</option>
 <option value="1002">1002</option>
</select>

<input type="text" id="t1" />
</body>
    InformationsquelleAutor Vivek Sadh
  3. 1

    Regardez:

    var ot = document.getElementById('OperationType');
ot.disabled = !elem.selectedIndex;
ot.style.display = 'none'; //not rendered
//ot.style.visisbility = 'hidden'; //rendered but just invisble it's there
    InformationsquelleAutor kidwon