Comment afficher la boîte de saisie d'un div particulier lorsqu'une valeur est sélectionnée dans la liste déroulante?

Question

J'ai une div répété plusieurs fois, contenant une boîte de sélection qui a une valeur Avancé. Lorsque je slectionne cette valeur dans la liste déroulante de la div particulière, je veux afficher une boîte de saisie correspondant à ce div.

<div > 

<select name="skilltest"> 

     <option value="advanced">Avanced</option> 

</select> 

<input type="text" class="disableskill"/> 

</div> 

J'ai écrit un script jquery pour afficher la zone de saisie comme indiqué ci-dessous:

$("select.skilltest").change(function() 
{ 
    var skillvalue=$(this).val(); 

    if(skillvalue == "Advanced" || skillvalue == "advanced") 
    { 
     $(".disableskill").show(); 
    } 
    else{ 

     $(".disableskill").hide(); 
    } 
}); 

Comment cela peut-il être atteint?

Answer 1

Vous pouvez utiliser la fonction suivante() pour sélectionner l'élément suivant de $ (this):

$("select[name=skilltest]").change(function(){ 
 
    var skillvalue=$(this).val(); 
 
    if(skillvalue == "Advanced" || skillvalue == "advanced"){ 
 
    $(this).next(".disableskill").show(); 
 
    } else{ 
 
    $(this).next(".disableskill").hide(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <select name="skilltest"> 
 
    <option>--please select--</option> 
 
    <option value="advanced">Avanced</option> 
 
    </select> 
 
    <input type="text" class="disableskill" style="display:none;"/> 
 
</div>

Answer 2

Vous pouvez essayer. Avec la méthode next(), vous pouvez masquer ou afficher l'entrée suivante.

$(".skilltest").change(function() 
 
{ 
 
    var skillvalue = $(this).val(); 
 
    if(skillvalue == "Advanced" || skillvalue == "advanced") 
 
    { 
 
     $(this).next(".disableskill").show(); 
 
    } 
 
    else{ 
 
     $(this).next(".disableskill").hide(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div> 
 
    <select class="skilltest"> 
 
    <option value="0"></option> 
 
    <option value="advanced">Avanced</option> 
 
    </select> 
 
    <input type="text" class="disableskill" style="display:none"/> 
 
</div> 
 

 
<div> 
 
    <select class="skilltest"> 
 
    <option value="0"></option> 
 
    <option value="advanced">Avanced</option> 
 
    </select> 
 
    <input type="text" class="disableskill" style="display:none"/> 
 
</div>

Answer 3

Vous pouvez essayer script suivant sans condition supplémentaire dans le bloc IF

$(".skilltest").change(function() 
{ 
    var skillvalue = $(this).val().toLowerCase(); 
    if(skillvalue == "advanced") 
    { 
     $(".disableskill").show(); 
    } 
    else{ 
     $(".disableskill").hide(); 
    } 
});