<td> 在选择菜单 JQuery 中选择选项时添加

我有一个包含各种数据的表单，但我想让一件事起作用，我有一条名为land的国家下拉列表。我希望这样，如果我选择Nederland，行中会有一个新列，名为province。但如果我选择了一个其他国家，那只是一个国家，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;
}

看看这两个小提琴。第一个是从下拉列表中获取值。（在您的案例中为"荷兰"）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即可。

解决方案如下：

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

相关内容

最新更新

热门标签：