jQuery - 基於選擇值更改輸入類型

Question

我需要根據select值在div內更改輸入類型。這是我的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> 

現在我想根據下面的輸入變更類型 -

<div class="col-md-5 t_val"> 
    <input type="text" class="form-control" value=""> 
</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> 

據我寫了下面jQuery代碼 -

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"); 
     } 
    }); 
} 

但沒有什麼是hap pening。任何支持都會很棒。

在此先感謝。

Answer 1

問題是您沒有執行該功能，並且$(this).parent().closest("div.t_val")也不起作用。

改變你的jQuery這樣的代碼：

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(); 

工作例如：https://jsfiddle.net/ebdg3q71/2/

---

你也可以寫這樣的：

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(); 

工作例如：https://jsfiddle.net/ebdg3q71/3/

Answer 2

試試這個：

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

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

該代碼會在下拉選擇改變每次更改輸入文本的密碼。 把你的條件和使用它。

Answer 3

你可以使用這樣的：

$(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"}); 

    }) 
}) 

最終代碼：

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