为啥我有两个选择器？
Posted
技术标签:
【中文标题】为啥我有两个选择器？【英文标题】：Why am i having two select pickers?为什么我有两个选择器？ 【发布时间】：2021-11-07 15:16:56 【问题描述】：为什么我有两个选择器，而应该只有一个。实际上，我在我的 javascript 函数中复制表的第一行，并在用户按下“添加”按钮时将其粘贴（作为新行）。但是选择选择器似乎有问题。
按“添加新”按钮查看问题。请参阅Jsfiddle
output i am having on 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"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></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。请帮帮我。谢谢
【问题讨论】：
能否请您创建一个代码笔或沙箱或一个包含所有资源的小提琴。如果不访问这些资源，这是无法重现的 @Cypherjac 完成。你现在能过吗！ jsfiddle 只显示一个选择器 @vanowm 请按“添加新”按钮，然后您就会知道问题所在 它添加了另一行debit 和 credit 字段，每行一个选择器 imgur.com/A5kzbiZ 也许在您的原始代码中，您错过了一个结束 html 标记等，或一个引号，基本无效的语法
【参考方案1】：
您看到两次的原因是因为您复制了所有内容。 selectpicker('render') 的工作方式类似于 jQuerys select2()。它隐藏了选择并插入了一些 div/span 以显示浏览器呈现的“假”选择，而不是操作系统呈现的选择。
如果您（例如）使用表格的最后一行作为预设，则每次调用 add new 时都会有一个附加的 selectpicker-button。
只需复制所选内容，而不是第一列的全部内容。
变化：
var accounts = $("table td:first-child").html();
到
var accounts = $("table td:first-child select").get(0).outerHTML;
将解决您的问题。
【讨论】：
以上是关于为啥我有两个选择器？的主要内容，如果未能解决你的问题，请参考以下文章