时间戳

首页 > 解决方案 > 为什么我有两个选择器？

javascript - 为什么我有两个选择器？

问题描述

为什么我有两个选择器，而应该只有一个。实际上，我在我的 javascript 函数中复制表的第一行，并在用户按下“添加”按钮时将其粘贴（作为新行）。但是选择选择器似乎有问题。

按“添加新”按钮查看问题。请参阅Jsfiddle

我在 jsfiddle 上的输出

在此处输入图像描述

这是我的 js 文件：

$(document).ready(function() {
    $('[data-toggle="tooltip"]').tooltip();
    var accounts = $("table td:first-child").html();
    var actions = $("table td:last-child").html();
    // Append table with add row form on add new button click
    $(".add-new").click(function() {
        $(this).attr("disabled", "disabled");
        var index = $("table tbody tr:last-child").index();
        var row =
            "<tr>" +
            "<td>" +
            accounts +
            "</td>" +
            '<td><input type="text" class="form-control" name="debit"></td>' +
            '<td><input type="text" class="form-control" name="credit"></td>' +
            '<td><input type="text" class="form-control" name="description"></td>' +
            "<td>" +
            actions +
            "</td>" +
            "</tr>";
        $("table").append(row);
        $("table tbody tr")
            .eq(index + 1)
            .find(".add, .edit")
            .toggle();
        $('[data-toggle="tooltip"]').tooltip();
        $('.selectpicker').selectpicker('render'); //is this line problematic?
    });
});

这是 HTML 文件的相应部分：

<!DOCTYPE html>
<html lang="en" xmlns:th="w3.org/1999/xhtml">

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="shortcut icon" href="/dashboardAssets/img/favicon.png" />

    <title>Create Transaction</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

    <!-- bootstrap-select CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.0/css/bootstrap-select.css" integrity="sha512-fbGrX/r0npKKqlimb6PTYM51KC1aAmZtP3srWTAKiavy3ISb0B2SrA4SXCePEZxphpjJJn6+OoAUxxqbHUD5Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <!-- font icon -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

  </head>

  <body>
    <!-- container section start -->
    <section id="container" class="">
      <!--main content start-->
      <section id="main-content">
        <section class="wrapper">
          <div class="row">
            <div class="col-lg-12">
              <h3 class="page-header"><i class="fa fa fa-bars"></i> Transaction</h3>
              <ol class="breadcrumb">
                <li><i class="fa fa-home"></i><a href="/dashboard">Home</a></li>
                <li><i class="fa fa-bars"></i>Transaction</li>
                <li><i class="fa fa-square-o"></i>Create Transaction</li>
              </ol>
            </div>
          </div>
          <!-- page start-->
          <form action="/commitTransaction">
            <div class="row">
              <div class="container">
                <div class="table-wrapper">
                  <div class="table-title">
                    <div class="row">
                      <div class="col-sm-8">
                        <h2>Create <b>Transaction</b></h2>
                      </div>
                      <div class="col-sm-4">
                        <button type="button" class="btn btn-info add-new"><i class="fa fa-plus"></i>
                          Add New</button>
                      </div>
                    </div>
                  </div>
                  <table class="table table-bordered">
                    <thead>
                      <tr>
                        <th>Account</th>
                        <th>Debit</th>
                        <th>Credit</th>
                        <th>Description</th>
                        <th>Actions</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>
                          <div class="row-fluid">
                            <select class="selectpicker" data-live-search="true" data-live-search-placeholder="Search">
                              <option value=""> -- Nothing Selected -- </option>
                              <optgroup label="Customers">
                                <option>cx</option>
                                <option>cy</option>
                                <option>cz</option>
                              </optgroup>
                            </select>
                          </div>
                        </td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>
                          <a class="add" title="Add" data-toggle="tooltip"><i class="material-icons">&lt;/i></a>
                          <a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons">&lt;/i></a>
                          <a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons">&lt;/i></a>
                        </td>
                      </tr>

                    </tbody>
                  </table>
                </div>
              </div>
            </div>

            <div class="row">
              <div class="container">
                <div class="panel panel-body">

                  <button class="btn btn-primary btn-lg" style="float:right" type="submit">Commit</button>

                </div>
              </div>
            </div>
          </form>
          <!-- page end-->
        </section>
      </section>
    </section>
    <!--main content end-->

    <!-- javascripts -->

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
    <!-- bootstrap-select -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.min.js" integrity="sha512-yDlE7vpGDP7o2eftkCiPZ+yuUyEcaBwoJoIhdXv71KZWugFqEphIS3PU60lEkFaz8RxaVsMpSvQxMBaKVwA5xg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  </body>

</html>

我在项目中使用 Thymeleaf 和 Java Spring。请帮帮我。谢谢

标签： javascripthtmljquerybootstrap-4

解决方案

您看到两次的原因是因为您复制了所有内容。selectpicker('render')类似于 jQuerys的作品select2()。它隐藏选择并插入一些 div/span 以显示浏览器渲染的“假”选择，而不是操作系统渲染的选择。

如果您（例如）使用表格的最后一行作为预设，则每次调用 add new 时都会有一个附加的 selectpicker 按钮。

只需复制选择，而不是第一列的全部内容。

改变：

var accounts = $("table td:first-child").html();

至

var accounts = $("table td:first-child select").get(0).outerHTML;

将解决您的问题。

推荐阅读