jquery - How to display a input textbox of particular div when selecting a value from select box? -


i have select box containing values shown below :

<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 skill level"> </div>   //next same div 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 skill level"> </div> 

i have multiple divs using class padnone. when clicking value advanced of particular div class padnone, should display input text box inside div class named disableskill of particular main div.

i have written jquery it, displaying input text boxes of every div.

$("select.skilltest").change(function() {      alert("checkbox checked.");     var skillvalue=$(this).val();     alert(skillvalue);     if(skillvalue  == "add")     {         alert("checkbox checked.");         $(this).find("div.disableskill").show();       }     else{          $(this).find("div.disableskill").hide();      } }); 

can solution ?

if understand well, try this:

$("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 skill level">  </div>        //next same div 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 skill level">  </div>


Comments

Popular posts from this blog

python - How to insert QWidgets in the middle of a Layout? -

python - serve multiple gunicorn django instances under nginx ubuntu -

module - Prestashop displayPaymentReturn hook url -