从选择框中选择值时如何显示特定 div 的输入文本框？

Question

我有一个选择框，其中包含如下所示的一些值：

<div>
<select class="skilltest">
     <option>Enter</option>
     <option class="add">Add</option>
</select>
</div>
<div class="disableskill">
<input type="text" class="form-control" name="Advanced" id="exampleInputName" placeholder="tell me your Skill level">
</div>


//next same div as above


<div>
<select class="skilltest">
     <option>Enter</option>
     <option class="add">Add</option>
</select>
</div>
<div class="disableskill">
<input type="text" class="form-control" name="Advanced" id="exampleInputName" placeholder="tell me your Skill level">
</div>

我有多个使用类 padnone 的 div。当我单击特定 div 类 padnone 的值 advanced 时，它应该在该特定主 div 的名为 disableskill 的 div 类中显示输入文本框。

我已经为它写了一个 jquery，但是它显示了每个 div 的所有输入文本框。

$("select.skilltest").change(function()
{

    alert("Checkbox is checked.");
    var skillvalue=$(this).val();
    alert(skillvalue);
    if(skillvalue  == "add")
    {
        alert("Checkbox is checked.");
        $(this).find("div.disableskill").show();


    }
    else{

        $(this).find("div.disableskill").hide();

    }
});

谁能说出解决办法？

Answer 1

如果我理解你，试试这个：

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

$("select.skilltest").change(function()
{
    var closestSelect = $(this).parent();  
    var skillvalue = $(this).val();
    
    if(skillvalue  == "Add")
    {
      $(closestSelect).next().show();
    }
    else{
           $(closestSelect).next().hide();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
 <select class="skilltest">
     <option>Enter</option>
     <option class="add">Add</option>
 </select>
</div>
<div class="disableskill">
 <input type="text" class="form-control"  name="Advanced" id="exampleInputName"  placeholder="tell me your Skill level">
</div>



//next same div as above


<div>
<select class="skilltest">
     <option>Enter</option>
     <option class="add">Add</option>
</select>
</div>
<div class="disableskill">
<input type="text" class="form-control" name="Advanced" id="exampleInputName" placeholder="tell me your Skill level">
</div>