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
Post a Comment