Question

我有一张包含各种数据的表单，但我想要一件事情，我有一个名为land的国家/地区下拉列表。我想要它，以便如果我选择Nederland，行中有一个名为provincie的新列。但是，如果我选择的是另一个国家而不仅仅是国家，而provincie则不应该出现。我将尽可能为您提供，

通过这个jsfiddle：

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

Answer 1

查看这两个小提琴。第一个是从下拉列表中获取值。（在你的情况下＆＃34;荷兰＆＃34;）http://jsfiddle.net/zwzakdnv/

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

动态添加列的第二个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

Answer 2

解决方案是：

25:00:00

在选择菜单JQuery中选择一个选项时添加一个

2 个答案: