jQuery - Ändern des Eingabetyps basierend auf dem Auswahlwert

Question

Ich muss einen Eingabetyp innerhalb eines div basierend auf einem select Wert ändern. Hier ist meine 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> 

Jetzt habe ich unter Eingabe ändern möchten Typ-

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

basierend auf -

<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> 

Was ich geschrieben habe, die unter 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"); 
     } 
    }); 
} 

Aber nichts ist Zufall Pening. Jede Unterstützung wird großartig sein.

Vielen Dank im Voraus.

Answer 1

Das Problem ist, dass Sie die Funktion nicht ausgeführt haben und auch die $(this).parent().closest("div.t_val") funktioniert nicht.

Ihre jQuery ändern Code wie folgt:

var changeValueInput = function() { 
    var $valueInput = $("select[name=t_rel]"); 

    $valueInput.change(function() { 
     var el = $(this).parents('.row').find(".t_val"); 
     if ($valueInput.val() == 'like') { 
      el.find('input').remove(); 
      el.append("<input type='number' class='some-other-class'>");  
     } else if ($valueInput.val() == 'range') { 
      el.find('input').remove(); 
      el.append("<input type='number' class='some-other-class'>"); 
     } else { 
      el.find('input').remove(); 
      el.append("<input type='number' class='some-other-class'>"); 
     } 
    }); 
} 

changeValueInput(); 

Arbeitsbeispiel:

var changeValueInput = function() { 
    var $valueInput = $("select[name=t_rel]"); 

    $valueInput.change(function() { 
     var el = $(this).parents('.row').find(".t_val"); 
     if ($valueInput.val() == 'like') { 
      el.html(''); 
      el.html("<input type='number' class='some-other-class'>"); 
     } else if ($valueInput.val() == 'range') { 
      el.html(''); 
      el.html("<input type='number' class='some-other-class'>"); 
     } else { 
      el.html(''); 
      el.html("<input type='number' class='some-other-class'>"); 
     } 
    }); 
} 

changeValueInput(); 

Arbeitsbeispiel: https://jsfiddle.net/ebdg3q71/2/

---

Auch es so können Sie schreiben https://jsfiddle.net/ebdg3q71/3/

Answer 2

Versuchen Sie folgendes:

$('select[name="t_rel"]').change(function(){ 
      var selectedVal = $(this).val(); 
      console.log(selectedVal); 

      $('.t_val').html('').html('<input type="password" class="form-control" value="">'); 
     }); 

Dieser Code wird die Eingabe von Text in das Kennwort jedes Mal ändern, wenn Drop-Down-Auswahl geändert. Setzen Sie Ihre Bedingungen und verwenden Sie sie.

Answer 3

können Sie wie folgt verwenden:

$(document).ready(function(){ 

$("select[name=t_rel]").on("change",function(){ 

    $value = $(this).val(); 
    $input = $(".col-md-5 input"); 

    if($value == 'like') 
     $input.removeAttr("class").attr({type:"number",class:"some-other-class"}); 

    else if ($value == 'range') 
     $input.removeAttr("class").attr({type:"password",class:"some-other-class"}); 

    else 
     $input.removeAttr("class").attr({type:"email",class:"some-other-class"}); 

    }) 
}) 

Schlusscode:

<html> 
 
    <title>This is test</title> 
 
    <head> 
 
    </head> 
 
    <body> 
 
     <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> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
     <script> 
 

 
     $(document).ready(function(){ 
 

 
     $("select[name=t_rel]").on("change",function(){ 
 

 
      $value = $(this).val(); 
 
      $input = $(".col-md-5 input"); 
 

 
      if($value == 'like') 
 
       $input.removeAttr("class").attr({type:"number",class:"some-other-class"}); 
 

 
      else if ($value == 'range') 
 
       $input.removeAttr("class").attr({type:"password",class:"some-other-class"}); 
 

 
      else 
 
       $input.removeAttr("class").attr({type:"email",class:"some-other-class"}); 
 

 
     }) 
 

 
     }) 
 
          
 

 
     </script> 
 
    </body> 
 
</html>