html - jQuery - Change input type based on selection value -


i need change input type inside div based on select value. here html-

<div id="query_template" class="hide">     <div class="col-md-12 query_row">         <div class="row">             <div class="col-md-3">                 <select name="t_col" class="form-control">                     <option value="1">col 1</option>                     <option value="1">col 2</option>                     <option value="1">col 3</option>                     <option value="1">col 4</option>                     <option value="1">col 5</option>                     <option value="1">col 6</option>                 </select>             </div>             <div class="col-md-3">                 <select name="t_rel" class="form-control">                     <option value="equal">=</option>                     <option value="greater_than">></option>                     <option value="less_than"><</option>                     <option value="like">like</option>                     <option value="range">range</option>                 </select>             </div>             <div class="col-md-5 t_val">                 <input type="text" class="form-control" value="">             </div>             <div class="col-md-1">                 <div class="btn-group" data-toggle="buttons">                     <label class="btn row-plus btn-primary">                         <a href="#" name="plus">+</a>                     </label>                     <label class="btn row-minus btn-primary">                         <a href="#" name="minus">-</a>                     </label>                 </div>             </div>         </div>     </div> </div> 

now want change below input type-

<div class="col-md-5 t_val">     <input type="text" class="form-control" value=""> </div> 

based on -

<div class="col-md-3">     <select name="t_rel" class="form-control">         <option value="equal">=</option>         <option value="greater_than">></option>         <option value="less_than"><</option>         <option value="like">like</option>         <option value="range">range</option>     </select> </div> 

as far i've written below jquery code-

var changevalueinput = function () {     var $valueinput = $("select[name=t_rel]");     $valueinput.change(function () {         if ($valueinput.val() == 'like') {             $(this).parent().closest("div.t_val").remove("input").append("<input type='number' class='some-other-class'>");         } else if ($valueinput.val() == 'range') {             $(this).parent().closest("div.t_val").remove("input").append("another-input-type-or-any-other-html");         } else {             $(this).parent().closest("div.t_val").remove("input").append("another-input-type-or-any-other-html");         }     }); } 

but nothing happening. support great.

thanks in advance.

try this:

$('select[name="t_rel"]').change(function(){             var selectedval = $(this).val();             console.log(selectedval);              $('.t_val').html('').html('<input type="password" class="form-control" value="">');         }); 

this code change input text password each time when dropdown selection changed. put conditions , use it.


Comments

Popular posts from this blog

mysql - Dreamhost PyCharm Django Python 3 Launching a Site -

java - Sending SMS with SMSLib and Web Services -

java - How to resolve The method toString() in the type Object is not applicable for the arguments (InputStream) -