如果選項等於值，則動態添加新行

我已經在引導程序中創建了特定的表單。但我想使這個動態，以便它顯示字段取決於字段值。例如，如果可以添加一個textarea，如果選項字段的值是1或2？如果選項等於值，則動態添加新行

<div class="container"> 
<h3>Kontakt</h3> 
<div class="row"> 
    <div class="form-group form-group-options col-lg-6 col-centered"> 
     <div class="input-group input-group-option col-xs-12 col-centered"> 
      <input type="text" name="option[]" class="form-control" placeholder="Navn"> 

     </div> 
     <div class="input-group input-group-option col-xs-12 col-centered"> 
      <input type="text" name="option[]" class="form-control" placeholder="Email"> 

     </div> 
     <div class="input-group input-group-option col-xs-12 col-centered"> 
      <input type="text" name="option[]" class="form-control" placeholder="Address"> 

     </div> 
     <div class="input-group input-group-multiple-select col-xs-12"> 
      <select class="form-control" name="values[]"> 
       <option value="">V&aelig;lg</option> 
       <option value="1">Tilflytning</option> 
       <option value="2">Fraflytning</option> 
       <option value="3">Andet</option> 
      </select> 
     </div> 
    </div> 
</div> 
</div>

https://jsfiddle.net/DTcHh/12528/

來源

2015-09-25 Peter Pik

我極力推薦的MVC /這個MVVM框架，比如[Angu lar]（https://angularjs.org/）或[Knockout]（http://knockoutjs.com/）。你能使用其中之一嗎？ –

[fiddle]（https://jsfiddle.net/dy2j71vf/） - *「如果選項字段的值是1或2，我該如何添加textarea？」* –

改變事件的你所需要的

$('#select').change(function(){ 
 
    $(this).val()=="1" || $(this).val()=="2" ? $('#textarea').removeClass("hidden") : $('#textarea').addClass("hidden"); 
 
}).trigger("change");

/* Latest compiled and minified CSS included as External Resource*/ 
 

 
/* Optional theme */ 
 

 

 
body { 
 
    margin: 10px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <h3>Kontakt</h3> 
 
    <div class="row"> 
 
     <div class="form-group form-group-options col-lg-6 col-centered"> 
 
      <div class="input-group input-group-option col-xs-12 col-centered"> 
 
       <input type="text" name="option[]" class="form-control" placeholder="Navn"> 
 
       
 
      </div> 
 
      <div class="input-group input-group-option col-xs-12 col-centered"> 
 
       <input type="text" name="option[]" class="form-control" placeholder="Email"> 
 
       
 
      </div> 
 
      <div class="input-group input-group-option col-xs-12 col-centered"> 
 
       <input type="text" name="option[]" class="form-control" placeholder="Address"> 
 
       
 
      </div> 
 
      <div class="input-group input-group-multiple-select col-xs-12"> 
 
       <select id="select" class="form-control" name="values[]"> 
 
        <option value="">V&aelig;lg</option> 
 
        <option value="1">Tilflytning</option> 
 
        <option value="2">Fraflytning</option> 
 
        <option value="3">Andet</option> 
 
       </select> 
 
      </div> 
 
      <div class="input-group input-group-option col-xs-12 col-centered"> 
 
       <textarea class="form-control" id="textarea"></textarea> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

來源

2015-09-25 13:39:39 Vanojx1

你可以利用改變事件。你可以做這樣的事情：

$('select').on('change',function(e){ 
    //Insert your conditions, for example: 
    if($(this).val()=='2'|| $(this).val()=='3'){ 
     //Insert here what you want, for example: 
     $('<p>Test</p>').insertAfter('.input-group-multiple-select'); 
    } 
})

Fiddle

讓我現在這是有用的。

來源

2015-09-25 13:32:53 Alberto

晚了一點，但是這是我的貢獻：

jQuery(document).ready(function ($) {  
    $("select[name='values\[\]']").on("change", function() { 
     if ($(this).val() == 1 || $(this).val() == 2) { 
      $("#textarea").remove(); 
      $("<div id='textarea' class='input-group input-group-option col-xs-12 col-centered'><textarea name=''></textarea></div>") 
      .insertAfter(this) 
      .parent(); 
     } else { 
      $("#textarea").remove(); 
     } 
    }); 
});

Fiddle

來源

2015-09-25 14:05:21 KeepMove

如果選項等於值，則動態添加新行

回答

相關問題