Modal不会关闭Selectize 6
是一个关于前端开发中的问题。在这个问题中，Modal指的是一个弹出窗口，而Selectize 6是一个前端库，用于创建自定义的下拉选择框。
问题的原因可能是在Modal中使用了Selectize 6，并且在关闭Modal时没有正确地销毁或隐藏Selectize实例。这可能导致Selectize实例仍然存在于DOM中，从而导致其不会关闭。
解决这个问题的方法是在关闭Modal之前，手动销毁或隐藏Selectize实例。可以使用Selectize提供的destroy()方法来销毁实例，或者使用hide()方法来隐藏实例。
以下是一个示例代码，展示了如何在关闭Modal时销毁Selectize实例：
// 创建Selectize实例
var selectize = $('#my-select').selectize(options);
// 关闭Modal时销毁Selectize实例
$('#myModal').on('hidden.bs.modal', function () {
selectize[0].selectize.destroy();
});在这个示例中，我们假设Modal的id为myModal，Selectize实例的id为my-select。在Modal关闭时，我们使用hidden.bs.modal事件来触发销毁Selectize实例的操作。
需要注意的是，以上示例中的options是Selectize的配置选项，可以根据具体需求进行调整。
关于Selectize 6的更多信息和使用方法，可以参考腾讯云的相关产品和文档：
- 腾讯云产品：腾讯云云开发（Serverless Cloud Function）
- 产品介绍链接地址：https://cloud.tencent.com/product/scf
- 文档链接地址：https://cloud.tencent.com/document/product/583
通过以上的解决方法和相关资源，应该能够解决Modal不会关闭Selectize 6的问题，并且能够更好地理解和应用云计算领域的前端开发知识。
相关·内容
我正在尝试开发一个应用程序，允许用户分享艺术家对其他艺术家的引用。例如，鲍勃·迪伦关于约翰·列侬的一句话。因此，我的艺术家模型是建立在一种方式，允许艺术家既是说话者和话题在一个引号，每个引号belongs_to每个艺术家作为发言人或主题。
我很难得到一个Rails错误信息来显示在一个引导模式中，当使用Selec阵触发该模式时。我通过跟踪实现了模式的工作。
该模型用于从Artist表单创建一个新的quotes/new，但我无法获得Artist模型在引导模式或引号/新页面中显示的错误消息。当我试图在模型中创建触发错误消息(如validates_uniqueness)的内容时，它只会关闭模式，而不会
浏览 0提问于2018-08-08得票数 8
我在rails中使用has_many :通过关联实现了一个简单的标记系统。我正在添加标签到书(使用selectize.js)，如果它存在或创建，如果它不存在。但是，新的标签模式表单应该在创建标签时自动关闭，但它不再是这样，我必须重新加载以选择创建的标签。我使用的是带有webpacker的Rails6。我在没有webpacker的情况下尝试了这个功能，一切都很顺利。
books/form.html.erb
<%= form_with(model: book, local: true) do |form| %>
<% if book.errors.any? %>
浏览 7提问于2020-03-01得票数 1
回答已采纳
1回答
我正在使用一个select表单动态加载到一个引导模式中。我使用selectize.js使这个选择可搜索。有人能告诉我如何在本地机器上使用selectize.js吗？(我不想每次从Internet选择图书馆加载.)
My "index.php“文件
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.clo
浏览 0提问于2020-11-17得票数 1
我正在使用selectize.js作为一个不错的下拉列表，但是当它下降时，我只想显示三个结果，而不是我得到的全部20个结果。因此，当用户想要找到某物时，他需要输入一些东西，除非它们是前三种类型之一。我对Javascript还不熟悉，在其他问题上找不到答案。我已经把我的相关代码放在下面。非常感谢！
<div class="field">
<%= f.label :homecity, "Home Town" %><br>
<%= f.select :homecity_id, Homecity.all.pluck
浏览 3提问于2017-05-04得票数 1
回答已采纳
1回答
嗨，我正在跟随一个旧的go rails视频选择性地尝试更新rails 6 我有一件属于一个系列的东西。 class Item < ApplicationRecord
belongs_to :series
end 一个系列有很多项 class Series < ApplicationRecord
has_many :items
end 在item表单中，我使用selective来查找或创建 <%= form_for @item do |form| %>
<div class="form-group">
浏览 20提问于2020-04-02得票数 1
回答已采纳
selectize的文档已经解释了如何使用create: function (input，callback) {...}将新项添加到数据库。
在我的例子中，选择框的基本模型不仅包含选项名称，还包含其他数据。
我有一个国家的选择框。选项是从包含"country_name“、"top_level”、"currency“的"Countries”模型中填充的。选择框只显示"country_name“。如果用户想要添加一个新的国家/地区，我想打开一个引导模式，让用户添加新的国家/地区数据，并在保存后使用refreshOptions ()刷新选择框。
我尝试在741
浏览 0提问于2015-05-20得票数 1
我有一个包含许多字段的表单，其中包括一些使用Selectize插件的选择。表单所做的部分工作包括从模式窗口获取输入，然后将其动态添加到相关的“选择”选择字段。
我目前正在进行如下操作：
//Initialise Selectize on the required fields
var $select = $('.selectize').selectize(...do some stuff in here...);
//Fetch the selectize instances
var select0 = $select[0].selectize;
var select1 =
浏览 46提问于2018-07-24得票数 1
2回答
我正在加载一个ajax表单，其中包含应用.selectize()的输入。当我关闭并重新打开表单时，我会遇到一些问题，因为还有一些选择化构造函数的实例仍然存在。
关闭表单时是否有方法移除这些实例？在打开和关闭表单时，我可以通过查看Selectize.count下DOM中的firebug来看到这些对象的生成。如何访问这些实例并销毁它们？
我试过这样做：
instance1[0].selectize.destroy();
instance2[0].selectize.destroy();
分配这样的变量：
instance1 = $('#preferences_sport').sel
浏览 3提问于2015-12-15得票数 2
回答已采纳
3回答
我正在使用来实现我的模式。我面临的一个问题是，当我点击屏幕上的任何位置，在我的模式div之外，我的模式就会关闭。我希望我的模式只有在我点击“取消”或“关闭”按钮时才能关闭。我找到了onOverlayClick函数道具，我用它来应用preventDefault，但是没有用。
有谁能建议一下实现这个功能的方法吗？提前谢谢。
class CustomModal extends Component{
constructor(props) {
super(props);
}
onOverlay = (e) =>{
e.preventDefault();
}
render(){
浏览 7提问于2020-05-05得票数 1
回答已采纳
2回答
我正在使用angular-bootstrap modal，但我对modal backdrop有一个问题。我是angular-bootstrap的新手，我希望任何人都能帮助我。
当我点击modal backdrop时，它隐藏了modal弹出窗口，但我想保留modal backdrop直到点击cancel。
任何人都可以为此提出解决方案。
谢谢
浏览 1提问于2013-12-20得票数 11
我正在尝试一些我还没有找到解决方案的东西--我正在尝试使用carousel中的卡片，并让这些卡片的详细信息打开一个模式。这适用于第一个模式，但对于第二个模式，它只显示模式背景，而不显示模式本身。因为我不能检查它，所以我不能看到它是否被放在屏幕上的其他地方。我读到有时当从另一个Bootstrap类(如卡)中打开两个通道时，会出现问题--这是问题所在吗？ 抱歉，麻烦，但经过搜索，很难看到一个干净的解决方案在这(至少对我作为一个初学者.. 第一张旋转木马幻灯片： <div id="carouselExampleIndicators" class="carousel
浏览 5提问于2020-01-10得票数 0
回答已采纳
1回答
我尝试将搜索输入作为多选择div中的第一个元素。我已经尝试过操纵DOM，也尝试过只使用CSS。 我可以让输入首先显示，下面是选定的选项，但这似乎破坏了删除标签的功能，我必须单击每个标签两次。 $(document).ready(function() {
let selectize = $("#mySelect").selectize({
searchField: ["text", "value"],
plugins: ["remove_button"]
});
}); .selectize-input
浏览 28提问于2021-07-23得票数 0
1回答
如果搜索中没有文本，我希望下拉值被隐藏。下面的代码对于单个选择来说就像一种魅力。当允许多个值选择时，它会在用户进行第一次选择之后自动显示所有下拉值。
<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/css/selectize.bootstrap3.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery
浏览 6提问于2021-09-02得票数 0
回答已采纳
2回答
我的style.css中有以下CSS：
.btfl-alert-warning:not(.selectize-control):not(.selectize-dropdown-content):not(.selectize-dropdown)
{
//some properties
}
现在，当我使用Eclipse格式时，eclipse会在‘Now’和括号之间留出空间，然后得到如下内容：
.btfl-alert-warning:not (.selectize-control ):not (.selectize-dropdown-content
):not (.selectize
浏览 2提问于2016-05-31得票数 1
回答已采纳
我有一个Selectize.js多输入字段，有一个固定的高度和宽度。当我选择几个值时，该字段将所选值放在多行中，使以前的值对用户隐藏。
有没有什么方法可以强制selectize始终将值放在一行中，而不是放到新行中？
浏览 1提问于2018-03-25得票数 2
1回答
基于彼此的自动更改2字段
、、、
我使用的是，我有两个选择字段：
$('#field1').selectize();
$('#field2').selectize();
当第一个字段更改(或选定)时，我希望自动更改第二个字段的值；反之亦然，当第二个字段的值发生更改(或选定)时，更改第一个字段的值。
我在使用函数，如下所示：
$("#field1").change(function () {
var d = 'value-field2'
var $select_field2 = $("#id_field2").selectize();
浏览 5提问于2017-04-18得票数 0
回答已采纳
2回答
我使用的是iphone 6+，声音超过(可访问性)选项打开。在单击链接时，我打开了退出模式，并将键盘焦点设置在模式上(使用js)。一切都很好。然而，声音过焦并没有切换到我的模式，它仍然是在触发链接。
我怎样才能把声音集中到模态上呢？这是模态代码
<div class="modal-container" id="{{ modalModel.modalId }}">
<div class="modal-mask" data-ng-click="onMaskClick($event)">
<
浏览 4提问于2016-01-29得票数 4
回答已采纳
我在通过jquery (例如$('#modalName').modal('hide');)关闭Bootstrap模式窗口时遇到了问题。
以下是主页(index.cfm)中包含的所有相关部分的基本结构：
模式的标记：
<div class="modal fade modal-wide" id="addEventModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="tru
浏览 2提问于2014-10-15得票数 0
我使用HTML来显示bootstrap模式对话框：
<div class="panel-body" data-toggle="modal" href="ajax_event_detail.php?event_id=512" data-target="#myModal-event" style="cursor: pointer;"></div>
引导模式对话框代码如下：
<div id="myModal-event" class="modal fade"
浏览 6提问于2016-01-05得票数 4
回答已采纳
我下载了Selectize.js，并试图将它安装到Rails 4应用程序中，但是文件太多了，我很困惑。任何人谁已经成功地安装到他们的应用程序选择帮助我解决这个问题？我正在尝试实现一个自动建议输入栏，用户可以从数据库中输入最多6个条目。
这里是我下载的内容(0.11.0版)：很抱歉有大量的文档，但这正是我感到困惑的原因。
-brianreavis-selectize.js-v0.11.0-0-gf293d8b (folder)
-brianreavis-selectize.js-f293d8b (folder)
-dist (folder)
-css (folder)
浏览 3提问于2014-12-24得票数 1
回答已采纳
我有一个下拉列表，我必须清除选定的值。
我尝试过这样做(如中所建议的)：
var selectize = $("#optionNetFlow")[0].selectize;
selectize.clear();
但是，它给出了以下错误：
当我把它改为：
var selectize = $("#optionNetFlow").selectize;
selectize.clear();
我给出了这个错误：
我在这里做错了什么？
浏览 0提问于2014-11-14得票数 50
回答已采纳
我想从修改一个基本的闪亮示例应用程序的几个组件开始，但我一直收到这个错误：
ERROR: unused arguments (fluidRow(column(4, tags$hr(),
verbatimTextOutput("out1"), selectInput("in1", "Options", choices =
state.name, multiple = TRUE, selectize = FALSE))), fluidRow(column(4,
tags$hr(), verbatimTextOutput("out2
浏览 0提问于2015-07-10得票数 6
回答已采纳
我正在使用Vue.js modal包，我不知道如何从我的模式窗口中获取响应数据。我为我的模式窗口创建了一个组件。组件用法如下所示： <MyModal :data="data"
@closed="modalClosed"/> 我想从闭合事件中获取数据。我用以下命令打开我的模式： this.$modal.show('my-modal') 并用以下命令结束： <button type="button" @click="$modal.hide('my-modal', {succ
浏览 63提问于2019-01-29得票数 0
回答已采纳
1回答
角度选择表单的验证
、、、、
我正在搜索为由角度选择指令()引起的输入设置验证。
问题是这个指令：
<selectize config="pic.interGermConfig" options="pic.interGermOptions" data-ng-model="pic.interGermFilter"></selectize>
生成以下输出：
<selectize config="pic.interGermConfig" options="pic.interGermOptions" data-ng-mod
浏览 2提问于2015-09-16得票数 1
我想在成功提交表单后关闭表单模式，并在清除所有错误后显示另一个模式框
当表单被提交并且表单上的html选择列表的值已经改变时，将显示有条件的js确认弹出。用户必须单击js确认弹出窗口上的OK按钮，表单提交才能继续。
否则，如果html选择列表没有改变，js确认弹出窗口将不会显示，并且表单将被提交。
以下是我的代码：
$('#infoForm').bootstrapValidator({
// live: 'disabled',
message: 'This value is not valid',
浏览 0提问于2014-11-06得票数 0
11回答
我有一个表单，我想从它复制一些默认值到输入中。表单输入使用selectize.js插件。我想通过编程设置一些表单值。这样做的标准方法是：
$("#my_input").val("My Default Value");
不管用。
我试过这样的方法，但也不起作用。
var $select = $("#my_input").selectize();
var selectize = $select[0].selectize;
selectize.setValue("My Default Value");
有什么想法吗？这一定很简单:)我
浏览 20提问于2014-02-22得票数 71
回答已采纳
3回答
我打开一个模态，然后点击一个div内的模式，我想关闭该模式，并打开另一个。但是当我这样做的时候，它关闭了第一个模态，只显示了第二个模态的背景，而主体没有显示。
我的HTML是：
<div id="test-modal" class="modal hide fade" data-keyboard="true">
<div class="modal-body">
<div id="option"><p>Click here to show the n
浏览 3提问于2016-05-18得票数 2
回答已采纳
1回答
我有一个模式，打开一个ajax请求来获取要填充的内容，Selectize就是其中之一。
Ajax获取一个对象数组来填充选择：
let optionsToPopulate = [{id: 6, name: "Foo"},{id: 1, name: "Bar"}]
我把上面的数组传递为：
$("#selectize").selectize({
options: optionsToPopulate,
items: optionsToPopulate,
valueField: 'name',
labelField:
浏览 1提问于2018-08-11得票数 2
2回答
自举模态表在验证前关闭
、、、
我用这里的例子来构建我的表单：
我的javascript似乎没有被调用，所以只要我单击"Save“，表单就会关闭。如有任何想法，将不胜感激。
这里是我的代码
<!-- Modal -->
<div class="modal hide fade" id="mailerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
&
浏览 0提问于2014-01-19得票数 1
我想要保护我的登录/注册模式关闭前，如果我点击外部模式内容，下一个问题是，如果我填写的形式不好，模式将关闭，点击链接后，错误将写在这个模式上-我不想关闭，如果是错误填写的表单和错误将在打开的模式，我也想如果我点击外部的模式内容，该模式将不会被关闭。 这是指向header.blade.php中情态动词的链接： <div id="app">
<div class="container">
<a class="menu-link" data-toggle="mo
浏览 19提问于2020-03-26得票数 0
1回答
如果你已经在你的选择器下拉菜单上创建了自定义渲染功能，那么是否可以使用ajax动态刷新下拉菜单项目呢？我可以选择其中之一，但当我将两部分功能组合在一起时，selectize下拉项不会重新呈现。
我已经使用回调函数来设置新的选项列表。
selectize控件在页面加载时使用以下javascript代码进行初始化。
var $select = $(item).selectize({
create: false,
sortField: 'text',
selectOnTab: true,
valueField: 'id',
labelField:
浏览 2提问于2015-04-30得票数 4
回答已采纳
1回答
我是通过jQuery在onclick按钮上动态添加选择框。但是选择框的CSS类不起作用。
下面是我的代码：
$(document).ready(function () {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1;
$(
浏览 0提问于2015-09-11得票数 0
1回答
modal.page.html
<ion-content>
<ion-button id="trigger-button">Click to open modal</ion-button>
<ion-modal trigger="trigger-button" [swipeToClose]="false" [presentingElement]="routerOutlet.nativeEl">
<ng-template>
<ion-con
浏览 7提问于2022-04-22得票数 0
回答已采纳
我正在使用Selectize.js。从文档中可以看到，我可以在这里设置一个'onDropdownClose‘回调：。我好像没办法让它起作用。
在使用Selectize.js进行了选择之后，我如何模糊(离焦)输入？下面代码中的所有模糊都不能工作。
$(document).ready(function() {
$("#myinput").selectize({
onDropdownClose : function ($dropdown) {
$($dropdown).prev().find('input&
浏览 0提问于2014-03-06得票数 5
回答已采纳
我对表单中的输入使用了，如果用户先选中了复选框，它就会显示出来：
{!! Form::text('engagement_question', null, ['id' => 'engagement_question', 'placeholder' => 'Spørsmål for "bli med"']) !!}
因此，在页面加载时，我检查复选框是否被选中，然后在脚本中根据该条件显示字段。
$(document).ready(function() {
engagementCheck
浏览 0提问于2016-12-14得票数 0
2回答
if/else语句而不是开关
、、、、
我有一个ajax请求：
SJA.ajax(dataToSend, //this is internal method, which sends requests to the urls
function (respond) {
var categorySelect = that.$modal.find('.cat-post')[0].selectize; //using selectize.js plugin for selects.
if (respond) {
callback && ca
浏览 2提问于2015-11-20得票数 1
回答已采纳
1回答
如果单击输入元素，则打开一个模态。用户应该在模型中选择一些数据。关闭时，所选数据应显示在触发单击事件的元素中。
<!-- input elements -->
<div class="wrapper">
<div class="row align-items-center mb-2 mt-2 ms-1 ">
<input type="text" id="txtMittel[]" name="txtNr1[]" class="
浏览 4提问于2022-02-21得票数 0
回答已采纳
我试图使用以下方法来计算div类的数量：
if(end($array) !=0) { ?>
<div class="circleRed" title= <?= $cred['name']; ?> data-toggle="modal" data-target="#myModal<?= $num; ?>"></div>
<script> document.getElementById("demoRed").innerHTML = $(".cir
浏览 1提问于2018-07-16得票数 1
回答已采纳
我有一个有形式的模态。我试图提交表单，而不使用ajax刷新页面，并且我成功地提交了表单，但我无法隐藏模式。
引导Modal，其中包含表单：
<div class="modal fade" id="exampleModalCenter" role="dialog">
<div class="modal-dialog modal-dialog-centered">
<!-- Modal content-->
<div class="modal-conte
浏览 0提问于2018-06-25得票数 0
回答已采纳
我有一个Rails 5.1应用程序，我正在使用coffeescript/JS在表单中使用Ajax创建病人记录。使用以下代码可以正常工作，没有问题：
_form.html.erb
<div class="modal fade patient-modal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm" role="document"
浏览 7提问于2017-10-08得票数 6
回答已采纳
1回答
我正在为一个表单使用Bootstrap模式窗口。我需要防止模式在按下提交按钮后关闭。我只需要在点击关闭按钮后关闭模式。请帮帮我。
<!--Login, Signup, Forgot Password Modal -->
<div id="login-signup-modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document"
浏览 2提问于2018-02-05得票数 1
1回答
嗨，Stack溢出社区的人
当用户单击引导模式窗口时，我希望将焦点放在输入上。
我尝试了下面的代码，但没有帮助。任何帮助都很感激。
$('#myModal').on('hidden.bs.modal', function() {
$('#focusMe').focus()
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
浏览 2提问于2020-07-09得票数 1
回答已采纳
我正在尝试从我的外部链接的内容中关闭模式窗口。
<a id="loginLink" data-toggle="modal" href="/Home/Login" data-target="#modalLogin">Log in</a>
<div class="modal" id="modalLogin" align="center">
<div class="modal-dialog">
<
浏览 0提问于2014-04-29得票数 0
我对javascript非常陌生，我不知道使用“选择”输入的这2段代码之间是否有区别。
这两种方法都很有效，但我不知道一个人是否更好，或者他们是否真的是一样的。哪一种更好，如果有的话？在html文档中放置javascripts的位置是否有“规则”或最佳实践？
抱歉，如果这是非常琐碎的:)
tl；博士
第1段代码的$('#location').selectize({ .... })在<body>标记中
第二个代码具有相同的$('#location').selectize({ .... })，但在<head>标记中，并包含在
$(docume
浏览 7提问于2015-12-10得票数 1
回答已采纳
1回答
我正在创建一个网络应用程序，连接到一个新闻API和显示文章。对于每一篇文章，我已经创建了一个卡片和一个模式在把手。
点击每一张卡上的按钮，我想要一个模式打开它独特的信息。
我试图为卡上的按钮添加一个事件侦听器来打开模式。
<div class="">
{{!-- #each article --}}
<div class="row">
{{#each articles}}
<div class="col-12-sm col-6-md col-3-l
浏览 11提问于2022-09-15得票数 0
1回答
这是ui-select，用户可以在这里选择一个选项：
<ui-select ng-model="state.selected" ng-change="openModal(state.selected,orders.order_id)" ng-if="orders.state == 'Paid'" theme="selectize" ng-disabled="disabled" style="width: 300px;"> .....
无论何时发生更改，它都会从引导程序触发
浏览 4提问于2015-10-30得票数 3
回答已采纳
我的代码如下：
<div class="container">
<h1 class="display-4 text-center mb-4">Bootstrap Modals</h1>
<div class="row mb-4">
<div class="col text-center">
<h3>The Basic Modal</h3>
<a href="#" class="
浏览 2提问于2019-12-16得票数 0
回答已采纳
1回答
如何从脚本代码而不是通过按钮触发模态？我在中找到的所有示例都使用模态触发机制。
<ion-button id="open-modal" expand="block">Open Sheet Modal</ion-button>
<ion-modal #modal trigger="open-modal" [initialBreakpoint]="0.25" [breakpoints]="[0, 0.25, 0.5, 0.75]">
我找不到或正确地搜索此功能。
浏览 14提问于2022-10-06得票数 0
早上好，我是selectize.js新手，我想在使用selectize.js的清晰函数之后，在输入标签中设置值，这是我的代码
$('#selectize-update-endUser').selectize()[0].selectize.clear()
const endUsers = "america, japan";
$('#selectize-update-endUser').val(endUsers);
$('#selectize-update-endUser').selectize({
plugins: ['
浏览 5提问于2021-03-17得票数 1
回答已采纳
1回答
假设我有一个类似如下的状态： this.state = {
modal: ""
}; 然后我有一个如下所示的按钮： <button
type="button"
className="btn btn-primary"
onClick={this.createUser}
data-dismiss={this.state.modal}
> Sav
浏览 6提问于2019-01-29得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
