選択メニューでオプションを選択するときにを追加します。JQuery

私はすべての種類のデータを含むフォームを持っていますが、仕事をしたいのですが、landという国のドロップダウンがあります。私はそれが欲しいので、もし私がNederlandを選ぶならば、行にはprovincieという名前の新しい列があるのです。しかし、もし私がそれ以外の国を選んだのであれば、それはただの国であり、provincieは現れてはいけません。私はこのjsfiddleを経由して、可能な限りで選択メニューでオプションを選択するときにを追加します。JQuery

をご提供いたします：

https://jsfiddle.net/o8jrb4sj/

stackoverflowのは、それをお勧めしますので、私はまたここにコードを配置します。

<!doctype html> 
<html> 
    <head> 
    <link rel="stylesheet" type="text/css" href="nadal.css"> 
    <meta charset="utf-8"> 
    <title>Demo</title> 
    </head> 
    <body> 
    <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> 
    <script> 
     $(document).ready(function(){ 
     $('input[name="submit"]').click(function(e) { 
      e.preventDefault(); 

      formIsValid = true; 

      var errors = []; 
      $('.errors').html(""); 

      $('input.required').each(function() { 
      if ($(this).val() == '') { 
       formIsValid = false; 
       message = $(this).attr('id') + ' is verplicht'; 
       errors.push(message); 
       $(this).addClass("red"); 
      } else{ 
       $(this).removeClass("red"); 
      } 
      }); 


      if (formIsValid == true) { 
      $('.data').append('<tr class="datarow"><td>'+$('input[name="name"]').val()+'</td><td>'+$('input[name="email"]').val()+'</td><td>'+$('input[name="phone_number"]').val()+'</td><td>'+$('#land option:selected').text()+'</td><td class="delete">X</td></tr>'); 
      updateTotalRows(); 

      $('.delete').click(function() { 
       $(this).parent().remove(); 
       updateTotalRows(); 
      }) 
      } 
     }); 

     function updateTotalRows() { 
      $('.total').html('Ik heb nu : ' + $('.datarow').length + ' rows'); 
     } 
     }); 
    </script> 
    <form id="myForm"> 
     <div class="errors"></div> 
     <input type="text" id="Naam" class="required" name="name" placeholder="name" > 
     <input type="email" id="Email" name="email" class="required" placeholder="email"> 
     <input type="number" id="Telefoonnummer" name="phone_number" class="required" placeholder="phone"> 
     <select name="land" id="land"> 
     <option value="Nederland">Nederland</option> 
     <option value="Duitsland">Duitsland</option> 
     <option value="Frankrijk">Frankrijk</option> 
     </select> 
     <input type="submit" name="submit"> 
    </form> 
    <form id="myFormCorrect"> 
     <table id="table"> 
     <thead> 
      <tr> 
      <th>Naam</th> 
      <th>Email</th> 
      <th>telefoonnummer</th> 
      <th>Land</th> 
      <th>&nbsp;</th> 
      </tr> 
     </thead> 
     <tbody class="data"> 
     </tbody> 
     </table> 
    </form> 
    <div class="total"></div> 
    </body> 
</html>

CSS：

.red { 
    border-color:red; 
} 

.dropdown-menu{ 
    background-color: #FFF; 
    list-style: none; 
}

出典

2016-04-14 Nadal Rahman

あなたはこのhttps://jsfiddle.net/o8jrb4sj/1/ – guradio

申し訳ありませんcouldntのは、親切に確認...あなたの質問を理解してチェックすることができhttps://jsfiddle.net/o8jrb4sj/2：ソリューションはこれです/ これは、あなたの望むことですか？ – RRR

https://jsfiddle.net/o8jrb4sj/3/ – RRR

これら2つのフィドルをチェックしてください。最初は、ドロップダウンから値を取得するためのものです。（お使いの場合には「オランダ」）http://jsfiddle.net/zwzakdnv/

$(document).ready(function(){ 
    $('#mydropdown').change(function(){ 
     $selected_value=$('#mydropdown option:selected').text(); 
     $('#result').text($selected_value); 
    }); 
});

2つ目http://jsfiddle.net/Jaganathan/R2Her/を動的に列があなたのテーブルに行です追加します。

<table border="1" id="mtable"> 
<thead><tr><td>Item</td><td>Red</td><td>Green</td></tr></thead> 
<tbody><tr><td>Some Item</td><td><input type="checkbox"/></td><td><input type="checkbox"/></td></tr></tbody>

行の挿入

列の挿入

とJS

$('#irow').click(function(){ 
if($('#row').val()){ 
    $('#mtable tbody').append($("#mtable tbody tr:last").clone()); 
    $('#mtable tbody tr:last :checkbox').attr('checked',false); 
    $('#mtable tbody tr:last td:first').html($('#row').val()); 
}else{alert('Enter Text');} 
}); 
$('#icol').click(function(){ 
if($('#col').val()){ 
    $('#mtable tr').append($("<td>")); 
    $('#mtable thead tr>td:last').html($('#col').val()); 
    $('#mtable tbody tr').each(function() {$(this).children('td:last').append($('<input type="checkbox">'))}); 
}else{alert('Enter Text');} 
});

だけでdiv要素にクラスを与える現れないはずの列/行を除去しますスタイルが表示されず、表示/削除するときにdivを切り替える

出典

2016-04-14 08:21:27 PetrosM

<!doctype html> 
<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="nadal.css"> 
    <meta charset="utf-8"> 
    <title>Demo</title> 
</head> 
<body> 
    <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> 

    <script> 
    $(document).ready(function(){ 
     $('input[name="submit"]').click(function(e) { 
      e.preventDefault(); 

      formIsValid = true; 

      var errors = []; 
      $('.errors').html(""); 

      $('input.required').each(function() { 
       if ($(this).val() == '') { 
        formIsValid = false; 
        message = $(this).attr('id') + ' is verplicht'; 
        errors.push(message); 
        $(this).addClass("red"); 
       } else{ 
        $(this).removeClass("red"); 
       } 
      }); 


      if (formIsValid == true) { 
        var provincie =""; 
       if ($('.province').val().trim() !="") { 
        provincie = $('.province').val(); 
       } 

       $('.data').append('<tr class="datarow"><td>'+$('input[name="name"]').val()+'</td><td>'+$('input[name="email"]').val()+'</td><td>'+$('input[name="phone_number"]').val()+'</td><td>'+$('#land option:selected').text()+ ' ' + provincie +'</td><td class="delete">X</td></tr>'); 
       updateTotalRows(); 


       $('.delete').click(function() { 
        $(this).parent().remove(); 
        updateTotalRows(); 
       }) 
      } 
     }); 

     function updateTotalRows() { 
      $('.total').html('Ik heb nu : ' + $('.datarow').length + ' rows'); 
     } 

     $('#land').on('change', function(){ 
      if($("#land").val()=="Nederland"){ 
       $('.province').show(); 
       $('#table thead tr th:contains(Province)').show(); 
      } 
      else{ 
       $('.province').hide(); 
       $('#table thead tr th:contains(Province)').hide(); 
      } 
     }); 

    }); 
</script> 



<form id="myForm"> 
    <div class="errors"></div> 

    <input type="text" id="Naam" class="required" name="name" placeholder="name" > 
    <input type="email" id="Email" name="email" class="required" placeholder="email"> 
    <input type="number" id="Telefoonnummer" name="phone_number" class="required" placeholder="phone"> 

    <select name="land" id="land"> 
     <option value="Nederland">Nederland</option> 
     <option value="Duitsland">Duitsland</option> 
     <option value="Frankrijk">Frankrijk</option> 
    </select> 
    <input type="text" class="province" placeholder="enter province"> 
    <input type="submit" name="submit"> 
</form> 



<form id="myFormCorrect"> 

    <table id="table"> 
     <thead> 
      <tr> 
       <th>Naam</th> 
       <th>Email</th> 
       <th>telefoonnummer</th> 
       <th>Land</th> 
       <th>Province</th> 
       <th>&nbsp;</th> 
      </tr> 
     </thead> 

     <tbody class="data"> 

     </tbody> 

    </table> 

</form> 

<div class="total"></div> 

</body> 
</html>

出典

2016-04-14 09:32:28

選択メニューでオプションを選択するときに​​を追加します。JQuery

答えて

関連する問題

選択メニューでオプションを選択するときにを追加します。JQuery