ドロップダウンから値を選択したときに特定のdivの入力ボックスを表示するにはどうすればよいですか？

Question

私はdivを1つの値を持つ選択ボックスを含む何度も繰り返していますアドバンス。特定のdivのドロップダウンでその値を選択すると、そのdivに対応する入力ボックスを表示したいと思います。

<div > 

<select name="skilltest"> 

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

</select> 

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

</div> 

私は、以下のように入力ボックスを表示するためにjqueryのスクリプトを書いた：

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

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

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

これを達成することができる方法

？

Answer 1

あなたは$（この）から次の要素を選択するために、次の（）関数を使用することができます。

$("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

あなたはこれを試すことができます。 next（）メソッドを使用すると、次の入力を非表示にすることができます。

$(".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

私はjQueryのhttps://api.jquery.comで兄弟を選択を見てみたい

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