jQuery是一个Javascript库，考虑添加Javascript标记。 jQuery是一个流行的跨浏览器JavaScript库，它通过最小化浏览器之间的差异来促进文档对象模型（DOM）遍历，事件处理，动画和AJAX交互。标记为jquery的问题应该与jquery相关，因此有问题的代码应该使用jquery，并且至少需要jquery与用法相关的元素。
MutationObserver 可以在突变之前进行更改吗？
我需要使用mutationobserver来防止DOM更改。 我（过去）使用以下代码来防止特定更改： document.bind("DOMSubtreeModified", function() { document.find('.Xx.xJ:包含("
JQuery DatePicker , beforeShowDay
我有点绝望，因为我不明白为什么 beforeShowDay 不能按我期望的方式工作。我试图突出显示来自数据库的某个日期（我从 Ajax 获取数据） 我不能
我正在尝试调试使用 jQuery 的 Web 应用程序。 在 firebug 中，我调用 $(document).ready.. 内的函数 function val() { console.log('在 doc.ready 外部验证'); } $(文档).准备好(
在 Woocommerce 的产品标题中添加产品 ID 作为后缀
我尝试在产品标题中添加产品 ID 作为后缀，例如： iPhoneX - 123（其中 123 是 ID） 我需要这个的原因与我正在处理的支付网关有关......
有没有办法让jplayer响应式？就是这个皮肤： http://jplayer.org/latest/demo-01-supplied-mp3/?theme=0 我想使用宽度百分比来缩放整个播放器。我尝试过使用
我正在使用 jQuery Chosen，我需要将多个选择的下拉列表中的每个选项文本放入数组中。 我可以通过以下方式轻松获取数组中的所有值： 我正在使用 jQuery Chosen，我需要将每个选项 text 放入多选下拉列表中的数组中。 我可以用这个轻松获取数组中的所有值： <select id="select_custom" data-placeholder="Choose a city" style="width:50%;" class="chosen-processed" multiple> <option value="cty01">New York</option> <option value="cty02">Madrid</option> <option value="cty03">Montreal</option> <option value="cty04">Paris</option> <option value="cty05">Berlin</option> </select> var select_custom = jQuery("#select_custom"); select_custom.change(function(){ var values = select_custom.chosen().val(); }); 根据选择的选项，它将返回一个值数组，如下所示： ['cty01', 'cty03', 'cty04'] 获取 text 而不是值相当于什么？ ['New York', 'Montreal', 'Paris'] 预先感谢您的帮助！ var select_custom = jQuery("#select_custom"); select_custom.change(function(){ var values = select_custom.chosen().val(); var labels = []; for (var i = 0; i < values.length; i++) { var label = select_custom.find('option[value="'+values[i]+'"]').text(); labels.push(label); } console.log(labels); }); 我们基本上循环遍历每个值，在 <select> 字段中搜索与该值匹配的 <option> 标签，然后将其推送到 labels 数组。 var select_custom = jQuery("#select_custom"); var arr = []; select_custom.change(function(){ var text = $('#select_custom option:selected').text(); if(!arr.includes(text)) { arr.push(text); } console.log(arr); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="select_custom" data-placeholder="Choose a city" style="width:50%;" class="chosen-processed" multiple> <option value="cty01">New York</option> <option value="cty02">Madrid</option> <option value="cty03">Montreal</option> <option value="cty04">Paris</option> <option value="cty05">Berlin</option> </select> 您可以使用地图功能 https://api.jquery.com/jquery.map/ $("#select_custom").change(function() { var text = $(this).find('option:selected').toArray().map(item => item.text).join(); console.clear(); console.log(text); $("#result").text(text); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="select_custom" data-placeholder="Choose a city" style="width:50%;" class="chosen-processed" multiple> <option value="cty01">New York</option> <option value="cty02">Madrid</option> <option value="cty03">Montreal</option> <option value="cty04">Paris</option> <option value="cty05">Berlin</option> </select> <div id="result"></div> 一行即可获取选定文本或值的数组 var array_of_texts = $('#Your_multiple_select option:selected').toArray().map(item => item.text); 输出：[“文本1”，“文本2”] var array_of_values = $('#SelectQButton option:selected').toArray().map(item => item.value); 输出：[“值1”，“值2”]
检测 jQuery 的 ajaxSubmit() 跳过的文件上传
我有一个表单，我通过 jQuery 的 ajaxSubmit() 函数提交该表单。此表单包含一个文件控件，并且它已被提出为一个可能的故障点，如果选择该文件，则重新...
缺少在 Struts 2 中通过 jQuery 的 ajaxSubmit() 提交的文件
我有一个表单，我通过 jQuery 的 ajaxSubmit() 函数提交该表单。此表单包含一个文件控件，并且它已被提出为一个可能的故障点，如果选择该文件，则重新...
有一个烦人的网站，它会阻止使用 而不是 来“在新选项卡中打开”的尝试。我使用 jQuery 编写了一个书签，... 有一个烦人的网站，它通过使用 <div onclick=> 而不是 <a href=> 来阻止“在新选项卡中打开”的尝试。我使用 jQuery 编写了一个书签，它创建了一个包装器 <a> 标签，并将其插入到其内容周围的 <div> 中。 如何删除原来的 onclick 处理程序？ 尚未提及： $('#myId')[0].onclick = null; // remove the inline onclick() event 未经测试，但是... $("selector").removeAttr("onclick"); 我想你已经尝试过了 $("selector").unbind("click"); 在某些情况下，将 onclick 设置为 null 不起作用，但这应该始终有效： document.getElementById("myId").setAttribute("onclick", ""); element.removeAttribute('onclick'); 就是这样。 实际上删除了监听器。 其他方法则不然——它仍然有效。 请参阅开发工具。截图如下。 留下失效的监听器通常没什么大不了的，但如果你有很多这样的监听器，它们会浪费CPU，并且你的页面或应用程序的性能会下降。 而且，它仍然像某种孤儿太监一样在你的代码中活着，这有点丑陋。 有点惊讶这个问题已经存在了近 15 年了，但从来没有一个正确的答案......尽管最后一个有正确的想法，除了“未经测试”的答案哈哈。 把这个扔在那里，因为我确信有人遇到过这个问题，试图真正回答这个问题，正确地，如果没有真正正确地回答，可能会导致问题。 消除影响并不等同于消除原因。 有时还不够。 使用这个： 不是这些：
我需要垂直滚动条来选择框选项列表。我必须只显示列表的前几项。我无法控制列表中的项目数量。 我已经检查了所有类似的任务...
我正在按照本教程使用 Divi 创建一个弹出窗口。 https://diviover.com/divi-popup-without-plugins-tutorial/ 我很难修改 javascript 以通过单击关闭弹出窗口...
当用户在使用 TinyMCE 时按下 Enter 键时，它不会添加新行，而是添加新段落。我可以更改此行为并强制它仅添加换行符 而不是新的
我正在打印从后端检索的 html。 printHtml(html模板) { var printWindow = window.open('', '_blank'); printWindow.document.write(htmlTemplate); 设置超时（函数（）{ ...
以下是我的表格 姓名： 以下是我的表格 <form id="form1"> <table> <tr><td >Name:</td><td class="CommentsRight"><input type="text" name="txtName" style="width:90%" /></td></tr> <tr><td >Email: (Optional)</td><td class="CommentsRight"><input type="text" Name="txtEmail" style="width:90%" /></td></tr> <tr><td >Comment: </td><td class="CommentsRight"><textarea type="text" style="width:90%" Name="txtMessage" TextMode="MultiLine" Rows="10"></textarea></td></tr> <tr><td ></td><td class="CommentsRight"><input type="submit" width="100" ID="cmdSubmit" onclick="javascript: SubmitComment();" /> <input type="button" ID="cmdCancel" Text="Reset" value="Reset" onclick="document.getElementById('form1').reset();" /></td></tr> </table> </form> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> function SubmitComment() { alert($("txtName").val()); $.ajax({ type: "POST", url: "@(Request.RawUrl)", data: '{txtCode: "' + $("#txtName.value") + '" }', contentType: "application/json; charset=utf-8", dataType: "json", success: function () { alert('success'); } , failure: function (response) { alert(response.d); } }); } 警报始终返回未定义的警报，我是 Ajax/Jquery 的初学者。 我已经尝试过#txtName，我也尝试过输入，但它没有返回我放入 txtName 中的任何值，我做错了什么。 然后我想扩展数据，以便将所有输入字符串传递到数据中。 简而言之， 如何获取txtName.text的值 如何构建数据字符串，使其包含分隔的数据值 非常感谢您的帮助。 尝试以下操作： <input type="text" name="txtName" style="width:90%" /> 进入 <input type="text" name="txtName" id="txtName" style="width:90%" /> javascript: SubmitComment(); 进入 javascript: SubmitComment(e); function SubmitComment() { 进入 function SubmitComment(e) { e.preventDefault(); alert($("txtName").val()); 进入 alert($("#txtName").val()); data: '{txtCode: "' + $("#txtName.value") + '" }', 进入 data: {txtCode: $("#txtName").val() }, // Send particular data (or) data: $("#form1").serialize(), // Send inside form all data 您不能像您那样使用 $("txtName") 。 jQuery 将不知道选择什么。没有类/id 或任何其他选择器。而是使用 $("input[name=txtName]").val() 或给 txtName 一个类或 id（就像我在下面的示例中所做的那样）。 如果您现在想以漂亮的 Json 格式发送表单，您需要将其序列化： var data = $("#form1").serialize(); https://jsfiddle.net/gahapv4t/ 您在ajax请求的数据参数中编写了错误的代码。您可以传递参数对象，然后 jQuery 负责将其转换为原始 POST 数据或查询字符串。 function SubmitComment() { alert($("txtName").val()); $.ajax({ type: "POST", url: "@(Request.RawUrl)", data: {txtCode: $("#txtName").val()}, dataType: "json", success: function (data) { alert('success'); alert(JSON.stringify(data)) } , failure: function (response) { alert(response.d); } }); 你可以通过多种方式做到这一点。根据您的标记，您可以尝试通过以下方式获取 txtName 的值 $("input[name=txtName]").val(); 或者您可以通过以下方式在输入字段中添加 id <input name="txtName" id="someid"> 最后要使用以下代码来获取值 $("#someid").val() $("input[name=txtName]").val()是通过名称获取值。 $("#id").val()就是通过它的id来获取值。 $(".class").val()就是通过类名获取值。 我想你已经知道第一个问题的答案了。 使用 $("#txtName').val() 接收字段的值， 您可以通过多种方式实现第二个问题： 使用.serialize()功能 就像 Marcel 所写的那样，您可以创建一个变量数据，在其中序列化表单并将其传递给 $.ajax 函数，如下所示： var data = $("#form1").serialize(); $.ajax({ type: "POST", url: "@(Request.RawUrl)", data: data, contentType: "application/json; charset=utf-8", dataType: "json", success: function () { alert('success'); } , failure: function (response) { alert(response.d); } }); 2。使用 FormData 对象 更新拦截表单提交事件的函数，创建 FormData 对象并传递表单，如下所示： $("#form1").submit(function(e){ e.preventDefault(); var formdata = new FormData($(this)[0]); $.ajax({ type: "POST", url: "@(Request.RawUrl)", data: formdata, contentType: "application/json; charset=utf-8", dataType: "json", success: function () { alert('success'); } , failure: function (response) { alert(response.d); } }); }); 通过此方法，您还可以插入自定义数据来传递： formData.append('action', 'customAction'); formData.append('id', 123); formData.append('mydogname', 'Jo'); 3.使用 post() 函数 这是使用 Ajax 发送发布数据的最简单方法之一（文档）。自定义和使用 Jquery 逻辑也很容易。 $( "#form1" ).submit(function( event ) { event.preventDefault(); var $form = $( this ), data = $form.serialize(); var posting = $.post( "@(Request.RawUrl)", data ); posting.done(function( data ) { alert(data); }); }); 希望这对您有帮助。
我有一个模态，该模态使用js动态显示内容。模态 html 是这样的： 我有一个模态，该模态通过使用 js 动态显示内容。模态 html 是这样的： <button type="button" class="openModalBtn btn btn-outline btn-primary btn-sm mb-1" data-template="templateModalEducation" data-title="Education"> <i class="fas fa-plus"></i> Add </button> <div id="modal" draggable="true" class="modal fade bd-example-modal-lg hide" role="dialog"> <div class="modal-dialog modal-dialog-centered modal-lg"> <div class="modal-content"> <div class="modal-header" style="margin-bottom: 10px;"> <b class="modal-title" id="modalTitle">Modal Title</b> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div id="modalBody" class="modal-body pt-0"> @* Modal content will be injected here *@ </div> </div> </div> </div> 然后模态使用我提供的模板将内容附加到“modalBody”内。内容正文模板的一个示例是： <div id="templateModalEducation"> <div class="row"> <div class="col-md-6 col-sm-6"> <div class="form-group"> <label class="Requiredinput">Year</label> <input type="text" class="form-control edu-year"> <span id="edu-year-validation" class="text-validation"></span> </div> </div> <div class="col-md-6 col-sm-6"> <div class="form-group"> <label class="Requiredinput">Level</label> <select class="form-control select2normalWithouClear edu-level" data-placeholder="Select Education Level"> <option></option> @if (Model.EduLevelDropdownList != null) { foreach (var level in Model.EduLevelDropdownList) { <option>@level.CodeName</option> } } </select> <span id="edu-level-validation" class="text-validation"></span> </div> </div> </div> <div class="row"> <div class="col-md-12 col-sm-12"> <div class="form-group"> <label class="Requiredinput">Institution Name</label> <select class="form-control select2normalWithouClear edu-instituteName" data-placeholder="Select Institution Name"> <option></option> <option value="0">Other</option> @if (Model.EduInstitutionDropdownList != null) { foreach (var institute in Model.EduInstitutionDropdownList) { <option>@institute.CodeName</option> } } </select> <span id="edu-instituteName-validation" class="text-validation"></span> </div> <div class="form-group"> <input type="text" class="form-control edu-instituteNameOther"> </div> <span id="edu-instituteNameOther-validation" class="text-validation"></span> </div> </div> <div class="modal-footer d-flex justify-content-end m-0 p-0"> <button id="addEducationRowToMainForm" data-target-table="#tableEducation" type="button" class="btn btn-outline btn-primary btn-sm mb-1"> <i class="fas fa-plus"></i> Add </button> <button id="updateEducationRow" type="button" class="btn btn-outline btn-primary btn-sm mb-1" style="display: none;"> <i class="fas fa-save"></i> Update </button> </div> </div> 这是我的 JavaScript 代码，它动态更改模式的内容： <script> // Function to load different template content into the modal function loadModalContent(templateId, title) { // Clear previous content to prevent duplication $('#modalBody').empty(); $('#modalBody .select2normalWithouClear').select2('destroy'); // Load new content and set the title var templateContent = $('#' + templateId).html(); // Get the content of the template $('#modalBody').html(templateContent); // Inject content into the modal body $('#modalTitle').text(title); // Set the modal title $('#modalBody .select2normalWithouClear').select2({ placeholder: $(this).data('placeholder') }); $('.edu-instituteNameOther').hide(); $('#modal').modal('show'); // Show the modal } // Event listener for buttons that trigger the modal with different templates $(document).on('click', '.openModalBtn', function () { var templateId = $(this).data('template'); // Get the template to load var modalTitle = $(this).data('title'); // Get the title for the modal loadModalContent(templateId, modalTitle); // Call the function to load the content TMCEWoFileUpl("250", ""); }); </script> 问题是，当我在页面加载后打开模式时，它会显示两个下拉菜单：一个功能正常，而另一个似乎是重复的并且不起作用。但是，当我第二次打开模式时，下拉列表会正确显示并且不会重复。有人可以帮我解决这个问题吗？ 我尝试过在模态之外初始化它，但仍然不起作用。 这是现场演示： // Function to load different template content into the modal function loadModalContent(templateId, title) { // Clear previous content to prevent duplication $('#modalBody').empty(); $('#modalBody .select2normalWithouClear').select2('destroy'); // Load new content and set the title var templateContent = $('#' + templateId).html(); // Get the content of the template $('#modalBody').html(templateContent); // Inject content into the modal body $('#modalTitle').text(title); // Set the modal title $('#modalBody .select2normalWithouClear').select2({ placeholder: $(this).data('placeholder') }); $('.edu-instituteNameOther').hide(); $('#modal').modal('show'); // Show the modal } // Event listener for buttons that trigger the modal with different templates $(document).on('click', '.openModalBtn', function() { var templateId = $(this).data('template'); // Get the template to load var modalTitle = $(this).data('title'); // Get the title for the modal loadModalContent(templateId, modalTitle); // Call the function to load the content //TMCEWoFileUpl("250", ""); }); <link href="~/lib/jquery-ui-1.13.2/jquery-ui.min.css" rel="stylesheet" /> <script src="~/lib/jquery-ui-1.13.2/jquery-ui.min.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" integrity="sha512-jnSuA4Ss2PkkikSOLtYs8BlYIeeIK1h99ty4YfvRPAlzr377vr3CXDb7sb7eEEBYjDtcYj+AjBH3FLv5uSJuXg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js" integrity="sha512-ykZ1QQr0Jy/4ZkvKuqWn4iF3lqPZyij9iRv6sGqLRdTPkY69YX6+7wvVGmsdBbiIfN/8OdsI7HABjvEok6ZopQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <button type="button" class="openModalBtn btn btn-outline btn-primary btn-sm mb-1" data-template="templateModalEducation" data-title="Education"> <i class="fas fa-plus"></i> Add </button> <div id="modal" draggable="true" class="modal fade bd-example-modal-lg hide" role="dialog"> <div class="modal-dialog modal-dialog-centered modal-lg"> <div class="modal-content"> <div class="modal-header" style="margin-bottom: 10px;"> <b class="modal-title" id="modalTitle">Modal Title</b> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div id="modalBody" class="modal-body pt-0"> @* Modal content will be injected here *@ </div> </div> </div> </div> <hr> <div id="templateModalEducation"> <div class="row"> <div class="col-md-6 col-sm-6"> <div class="form-group"> <label class="Requiredinput">Year</label> <input type="text" class="form-control edu-year"> <span id="edu-year-validation" class="text-validation"></span> </div> </div> <div class="col-md-6 col-sm-6"> <div class="form-group"> <label class="Requiredinput">Level</label> <select class="form-control select2normalWithouClear edu-level" data-placeholder="Select Education Level"> <option></option> <option value="1">Option1</option> <option value="2">Option2</option> <option value="3">Option3</option> <!-- @if (Model.EduLevelDropdownList != null) { foreach (var level in Model.EduLevelDropdownList) { <option>@level.CodeName</option> } } --> </select> <span id="edu-level-validation" class="text-validation"></span> </div> </div> </div> <div class="row"> <div class="col-md-12 col-sm-12"> <div class="form-group"> <label class="Requiredinput">Institution Name</label> <select class="form-control select2normalWithouClear edu-instituteName" data-placeholder="Select Institution Name" > <option></option> <option value="0">Other</option> <option value="1">Option1</option> <option value="2">Option2</option> <option value="3">Option3</option> <!-- @if (Model.EduInstitutionDropdownList != null) { foreach (var institute in Model.EduInstitutionDropdownList) { <option>@institute.CodeName</option> } } --> </select> <span id="edu-instituteName-validation" class="text-validation"></span> </div> <div class="form-group"> <input type="text" class="form-control edu-instituteNameOther"> </div> <span id="edu-instituteNameOther-validation" class="text-validation"></span> </div> </div> <div class="modal-footer d-flex justify-content-end m-0 p-0"> <button id="addEducationRowToMainForm" data-target-table="#tableEducation" type="button" class="btn btn-outline btn-primary btn-sm mb-1" > <i class="fas fa-plus"></i> Add </button> <button id="updateEducationRow" type="button" class="btn btn-outline btn-primary btn-sm mb-1" style="display: none;" > <i class="fas fa-save"></i> Update </button> </div> </div> 我根据 aurelian-scarlat 在 此 GitHub 问题中的评论找到了解决方案 如果你的盒子有一个名为 select2 的类，你会遇到麻烦，因为还有一些其他元素具有相同的类。 所以这是错误的：$('.select2').select2('destroy'); 正确的做法是： $('select.select2').select2('destroy'); 或者更改盒子的类别：$('.select-select2').select2('destroy'); 或者更好的是，使用 id：$('#selectbox').select2('destroy'); 我花了一段时间才弄清楚这一点，我希望它对某人有帮助。 我不能使用类名.select2normalWithouClear，因为还有一些其他元素具有相同的类。所以我所做的就是为我的所有选择赋予相同的新类名称，并像这样初始化它们： <select class="form-control select2normalWithouClear edu-level mySelectDropdown" data-placeholder="Select Education Level"><option>Test 1</option><option>Test 2</option><option>Test 3</option></select> <select class="form-control select2normalWithouClear edu-instituteName mySelectDropdown" data-placeholder="Select Institution Name"><option>Test 1</option><option>Test 2</option><option>Test 3</option></select> 初始化它： $('.mySelectDropdown').select2({ placeholder: $(this).data('placeholder') });
使用 javascript 或 jquery 创建 .ics 文件
我试图在用户单击按钮时创建 .ics 文件。 到目前为止我的代码是 msgData1 = $('.start-time').text(); msgData2 = $('.end-time').text(); msgData3 = $('.位置').text(); ...
我有一个模态，该模态使用js动态显示内容。模态 html 是这样的： 我有一个模态，该模态通过使用 js 动态显示内容。模态 html 是这样的： <button type="button" class="openModalBtn btn btn-outline btn-primary btn-sm mb-1" data-template="templateModalEducation" data-title="Education"> <i class="fas fa-plus"></i> Add </button> <div id="modal" draggable="true" class="modal fade bd-example-modal-lg hide" role="dialog"> <div class="modal-dialog modal-dialog-centered modal-lg"> <div class="modal-content"> <div class="modal-header" style="margin-bottom: 10px;"> <b class="modal-title" id="modalTitle">Modal Title</b> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div id="modalBody" class="modal-body pt-0"> @* Modal content will be injected here *@ </div> </div> </div> </div> 然后模态使用我提供的模板将内容附加到“modalBody”内。内容正文模板的一个示例是： <div id="templateModalEducation"> <div class="row"> <div class="col-md-6 col-sm-6"> <div class="form-group"> <label class="Requiredinput">Year</label> <input type="text" class="form-control edu-year"> <span id="edu-year-validation" class="text-validation"></span> </div> </div> <div class="col-md-6 col-sm-6"> <div class="form-group"> <label class="Requiredinput">Level</label> <select class="form-control select2normalWithouClear edu-level" data-placeholder="Select Education Level"> <option></option> @if (Model.EduLevelDropdownList != null) { foreach (var level in Model.EduLevelDropdownList) { <option>@level.CodeName</option> } } </select> <span id="edu-level-validation" class="text-validation"></span> </div> </div> </div> <div class="row"> <div class="col-md-12 col-sm-12"> <div class="form-group"> <label class="Requiredinput">Institution Name</label> <select class="form-control select2normalWithouClear edu-instituteName" data-placeholder="Select Institution Name"> <option></option> <option value="0">Other</option> @if (Model.EduInstitutionDropdownList != null) { foreach (var institute in Model.EduInstitutionDropdownList) { <option>@institute.CodeName</option> } } </select> <span id="edu-instituteName-validation" class="text-validation"></span> </div> <div class="form-group"> <input type="text" class="form-control edu-instituteNameOther"> </div> <span id="edu-instituteNameOther-validation" class="text-validation"></span> </div> </div> <div class="modal-footer d-flex justify-content-end m-0 p-0"> <button id="addEducationRowToMainForm" data-target-table="#tableEducation" type="button" class="btn btn-outline btn-primary btn-sm mb-1"> <i class="fas fa-plus"></i> Add </button> <button id="updateEducationRow" type="button" class="btn btn-outline btn-primary btn-sm mb-1" style="display: none;"> <i class="fas fa-save"></i> Update </button> </div> </div> 这是我的 JavaScript 代码，它动态更改模式的内容： <script> // Function to load different template content into the modal function loadModalContent(templateId, title) { // Clear previous content to prevent duplication $('#modalBody').empty(); $('#modalBody .select2normalWithouClear').select2('destroy'); // Load new content and set the title var templateContent = $('#' + templateId).html(); // Get the content of the template $('#modalBody').html(templateContent); // Inject content into the modal body $('#modalTitle').text(title); // Set the modal title $('#modalBody .select2normalWithouClear').select2({ placeholder: $(this).data('placeholder') }); $('.edu-instituteNameOther').hide(); $('#modal').modal('show'); // Show the modal } // Event listener for buttons that trigger the modal with different templates $(document).on('click', '.openModalBtn', function () { var templateId = $(this).data('template'); // Get the template to load var modalTitle = $(this).data('title'); // Get the title for the modal loadModalContent(templateId, modalTitle); // Call the function to load the content TMCEWoFileUpl("250", ""); }); </script> 问题是，当我在页面加载后打开模式时，它会显示两个下拉菜单：一个功能正常，而另一个似乎是重复的并且不起作用。但是，当我第二次打开模式时，下拉列表会正确显示并且不会重复。有人可以帮我解决这个问题吗？ 我尝试过在模态之外初始化它，但仍然不起作用。 这是现场演示： // Function to load different template content into the modal function loadModalContent(templateId, title) { // Clear previous content to prevent duplication $('#modalBody').empty(); $('#modalBody .select2normalWithouClear').select2('destroy'); // Load new content and set the title var templateContent = $('#' + templateId).html(); // Get the content of the template $('#modalBody').html(templateContent); // Inject content into the modal body $('#modalTitle').text(title); // Set the modal title $('#modalBody .select2normalWithouClear').select2({ placeholder: $(this).data('placeholder') }); $('.edu-instituteNameOther').hide(); $('#modal').modal('show'); // Show the modal } // Event listener for buttons that trigger the modal with different templates $(document).on('click', '.openModalBtn', function() { var templateId = $(this).data('template'); // Get the template to load var modalTitle = $(this).data('title'); // Get the title for the modal loadModalContent(templateId, modalTitle); // Call the function to load the content //TMCEWoFileUpl("250", ""); }); <link href="~/lib/jquery-ui-1.13.2/jquery-ui.min.css" rel="stylesheet" /> <script src="~/lib/jquery-ui-1.13.2/jquery-ui.min.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" integrity="sha512-jnSuA4Ss2PkkikSOLtYs8BlYIeeIK1h99ty4YfvRPAlzr377vr3CXDb7sb7eEEBYjDtcYj+AjBH3FLv5uSJuXg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js" integrity="sha512-ykZ1QQr0Jy/4ZkvKuqWn4iF3lqPZyij9iRv6sGqLRdTPkY69YX6+7wvVGmsdBbiIfN/8OdsI7HABjvEok6ZopQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <button type="button" class="openModalBtn btn btn-outline btn-primary btn-sm mb-1" data-template="templateModalEducation" data-title="Education"> <i class="fas fa-plus"></i> Add </button> <div id="modal" draggable="true" class="modal fade bd-example-modal-lg hide" role="dialog"> <div class="modal-dialog modal-dialog-centered modal-lg"> <div class="modal-content"> <div class="modal-header" style="margin-bottom: 10px;"> <b class="modal-title" id="modalTitle">Modal Title</b> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div id="modalBody" class="modal-body pt-0"> @* Modal content will be injected here *@ </div> </div> </div> </div> <hr> <div id="templateModalEducation"> <div class="row"> <div class="col-md-6 col-sm-6"> <div class="form-group"> <label class="Requiredinput">Year</label> <input type="text" class="form-control edu-year"> <span id="edu-year-validation" class="text-validation"></span> </div> </div> <div class="col-md-6 col-sm-6"> <div class="form-group"> <label class="Requiredinput">Level</label> <select class="form-control select2normalWithouClear edu-level" data-placeholder="Select Education Level"> <option></option> <option value="1">Option1</option> <option value="2">Option2</option> <option value="3">Option3</option> <!-- @if (Model.EduLevelDropdownList != null) { foreach (var level in Model.EduLevelDropdownList) { <option>@level.CodeName</option> } } --> </select> <span id="edu-level-validation" class="text-validation"></span> </div> </div> </div> <div class="row"> <div class="col-md-12 col-sm-12"> <div class="form-group"> <label class="Requiredinput">Institution Name</label> <select class="form-control select2normalWithouClear edu-instituteName" data-placeholder="Select Institution Name" > <option></option> <option value="0">Other</option> <option value="1">Option1</option> <option value="2">Option2</option> <option value="3">Option3</option> <!-- @if (Model.EduInstitutionDropdownList != null) { foreach (var institute in Model.EduInstitutionDropdownList) { <option>@institute.CodeName</option> } } --> </select> <span id="edu-instituteName-validation" class="text-validation"></span> </div> <div class="form-group"> <input type="text" class="form-control edu-instituteNameOther"> </div> <span id="edu-instituteNameOther-validation" class="text-validation"></span> </div> </div> <div class="modal-footer d-flex justify-content-end m-0 p-0"> <button id="addEducationRowToMainForm" data-target-table="#tableEducation" type="button" class="btn btn-outline btn-primary btn-sm mb-1" > <i class="fas fa-plus"></i> Add </button> <button id="updateEducationRow" type="button" class="btn btn-outline btn-primary btn-sm mb-1" style="display: none;" > <i class="fas fa-save"></i> Update </button> </div> </div> 如果我的问题不清楚，我很抱歉，我对这个领域还是新手。不过，我根据 GitHub 问题中“aurelian-scarlat”的评论找到了一个解决方案： https://github.com/Meteor-Community-Packages/meteor-autoform-select2/issues/44 我无法使用类名“.select2normalWithouClear”，因为还有一些其他元素具有相同的类。所以我所做的就是为我的所有选择赋予相同的新类名称，并像这样初始化它们： <select class="form-control select2normalWithouClear edu-level mySelectDropdown" data-placeholder="Select Education Level"><option>Test 1</option><option>Test 2</option><option>Test 3</option></select> <select class="form-control select2normalWithouClear edu-instituteName mySelectDropdown" data-placeholder="Select Institution Name"><option>Test 1</option><option>Test 2</option><option>Test 3</option></select> 初始化它： $('.mySelectDropdown').select2({ placeholder: $(this).data('placeholder') });
我有一个模态，该模态使用js动态显示内容。模态 html 是这样的： 我有一个模态，该模态通过使用 js 动态显示内容。模态 html 是这样的： <button type="button" class="openModalBtn btn btn-outline btn-primary btn-sm mb-1" data-template="templateModalEducation" data-title="Education"> <i class="fas fa-plus"></i> Add </button> <div id="modal" draggable="true" class="modal fade bd-example-modal-lg hide" role="dialog"> <div class="modal-dialog modal-dialog-centered modal-lg"> <div class="modal-content"> <div class="modal-header" style="margin-bottom: 10px;"> <b class="modal-title" id="modalTitle">Modal Title</b> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div id="modalBody" class="modal-body pt-0"> @* Modal content will be injected here *@ </div> </div> </div> </div> 然后模态使用我提供的模板将内容附加到“modalBody”内。内容正文模板的一个示例是： <div id="templateModalEducation"> <div class="row"> <div class="col-md-6 col-sm-6"> <div class="form-group"> <label class="Requiredinput">Year</label> <input type="text" class="form-control edu-year"> <span id="edu-year-validation" class="text-validation"></span> </div> </div> <div class="col-md-6 col-sm-6"> <div class="form-group"> <label class="Requiredinput">Level</label> <select class="form-control select2normalWithouClear edu-level" data-placeholder="Select Education Level"> <option></option> @if (Model.EduLevelDropdownList != null) { foreach (var level in Model.EduLevelDropdownList) { <option>@level.CodeName</option> } } </select> <span id="edu-level-validation" class="text-validation"></span> </div> </div> </div> <div class="row"> <div class="col-md-12 col-sm-12"> <div class="form-group"> <label class="Requiredinput">Institution Name</label> <select class="form-control select2normalWithouClear edu-instituteName" data-placeholder="Select Institution Name"> <option></option> <option value="0">Other</option> @if (Model.EduInstitutionDropdownList != null) { foreach (var institute in Model.EduInstitutionDropdownList) { <option>@institute.CodeName</option> } } </select> <span id="edu-instituteName-validation" class="text-validation"></span> </div> <div class="form-group"> <input type="text" class="form-control edu-instituteNameOther"> </div> <span id="edu-instituteNameOther-validation" class="text-validation"></span> </div> </div> <div class="modal-footer d-flex justify-content-end m-0 p-0"> <button id="addEducationRowToMainForm" data-target-table="#tableEducation" type="button" class="btn btn-outline btn-primary btn-sm mb-1"> <i class="fas fa-plus"></i> Add </button> <button id="updateEducationRow" type="button" class="btn btn-outline btn-primary btn-sm mb-1" style="display: none;"> <i class="fas fa-save"></i> Update </button> </div> </div> 这是我的 JavaScript 代码，它动态更改模式的内容： <script> // Function to load different template content into the modal function loadModalContent(templateId, title) { // Clear previous content to prevent duplication $('#modalBody').empty(); $('#modalBody .select2normalWithouClear').select2('destroy'); // Load new content and set the title var templateContent = $('#' + templateId).html(); // Get the content of the template $('#modalBody').html(templateContent); // Inject content into the modal body $('#modalTitle').text(title); // Set the modal title $('#modalBody .select2normalWithouClear').select2({ placeholder: $(this).data('placeholder') }); $('.edu-instituteNameOther').hide(); $('#modal').modal('show'); // Show the modal } // Event listener for buttons that trigger the modal with different templates $(document).on('click', '.openModalBtn', function () { var templateId = $(this).data('template'); // Get the template to load var modalTitle = $(this).data('title'); // Get the title for the modal loadModalContent(templateId, modalTitle); // Call the function to load the content TMCEWoFileUpl("250", ""); }); </script> 问题是，当我在页面加载后打开模式时，它会显示两个下拉菜单：一个功能正常，而另一个似乎是重复的并且不起作用。但是，当我第二次打开模式时，下拉列表会正确显示并且不会重复。有人可以帮我解决这个问题吗？ 我尝试过在模态之外初始化它，但仍然不起作用。 这是现场演示： // Function to load different template content into the modal function loadModalContent(templateId, title) { // Clear previous content to prevent duplication $('#modalBody').empty(); $('#modalBody .select2normalWithouClear').select2('destroy'); // Load new content and set the title var templateContent = $('#' + templateId).html(); // Get the content of the template $('#modalBody').html(templateContent); // Inject content into the modal body $('#modalTitle').text(title); // Set the modal title $('#modalBody .select2normalWithouClear').select2({ placeholder: $(this).data('placeholder') }); $('.edu-instituteNameOther').hide(); $('#modal').modal('show'); // Show the modal } // Event listener for buttons that trigger the modal with different templates $(document).on('click', '.openModalBtn', function() { var templateId = $(this).data('template'); // Get the template to load var modalTitle = $(this).data('title'); // Get the title for the modal loadModalContent(templateId, modalTitle); // Call the function to load the content //TMCEWoFileUpl("250", ""); }); <link href="~/lib/jquery-ui-1.13.2/jquery-ui.min.css" rel="stylesheet" /> <script src="~/lib/jquery-ui-1.13.2/jquery-ui.min.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" integrity="sha512-jnSuA4Ss2PkkikSOLtYs8BlYIeeIK1h99ty4YfvRPAlzr377vr3CXDb7sb7eEEBYjDtcYj+AjBH3FLv5uSJuXg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js" integrity="sha512-ykZ1QQr0Jy/4ZkvKuqWn4iF3lqPZyij9iRv6sGqLRdTPkY69YX6+7wvVGmsdBbiIfN/8OdsI7HABjvEok6ZopQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <button type="button" class="openModalBtn btn btn-outline btn-primary btn-sm mb-1" data-template="templateModalEducation" data-title="Education"> <i class="fas fa-plus"></i> Add </button> <div id="modal" draggable="true" class="modal fade bd-example-modal-lg hide" role="dialog"> <div class="modal-dialog modal-dialog-centered modal-lg"> <div class="modal-content"> <div class="modal-header" style="margin-bottom: 10px;"> <b class="modal-title" id="modalTitle">Modal Title</b> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div id="modalBody" class="modal-body pt-0"> @* Modal content will be injected here *@ </div> </div> </div> </div> <hr> <div id="templateModalEducation"> <div class="row"> <div class="col-md-6 col-sm-6"> <div class="form-group"> <label class="Requiredinput">Year</label> <input type="text" class="form-control edu-year"> <span id="edu-year-validation" class="text-validation"></span> </div> </div> <div class="col-md-6 col-sm-6"> <div class="form-group"> <label class="Requiredinput">Level</label> <select class="form-control select2normalWithouClear edu-level" data-placeholder="Select Education Level"> <option></option> <option value="1">Option1</option> <option value="2">Option2</option> <option value="3">Option3</option> <!-- @if (Model.EduLevelDropdownList != null) { foreach (var level in Model.EduLevelDropdownList) { <option>@level.CodeName</option> } } --> </select> <span id="edu-level-validation" class="text-validation"></span> </div> </div> </div> <div class="row"> <div class="col-md-12 col-sm-12"> <div class="form-group"> <label class="Requiredinput">Institution Name</label> <select class="form-control select2normalWithouClear edu-instituteName" data-placeholder="Select Institution Name" > <option></option> <option value="0">Other</option> <option value="1">Option1</option> <option value="2">Option2</option> <option value="3">Option3</option> <!-- @if (Model.EduInstitutionDropdownList != null) { foreach (var institute in Model.EduInstitutionDropdownList) { <option>@institute.CodeName</option> } } --> </select> <span id="edu-instituteName-validation" class="text-validation"></span> </div> <div class="form-group"> <input type="text" class="form-control edu-instituteNameOther"> </div> <span id="edu-instituteNameOther-validation" class="text-validation"></span> </div> </div> <div class="modal-footer d-flex justify-content-end m-0 p-0"> <button id="addEducationRowToMainForm" data-target-table="#tableEducation" type="button" class="btn btn-outline btn-primary btn-sm mb-1" > <i class="fas fa-plus"></i> Add </button> <button id="updateEducationRow" type="button" class="btn btn-outline btn-primary btn-sm mb-1" style="display: none;" > <i class="fas fa-save"></i> Update </button> </div> </div> 如果我的问题不清楚，我很抱歉，我对这个领域还是新手。不过，我根据 GitHub 问题中“aurelian-scarlat”的评论找到了一个解决方案： https://github.com/Meteor-Community-Packages/meteor-autoform-select2/issues/44 我无法使用类名“.select2normalWithouClear”，因为还有一些其他元素具有相同的类。所以我所做的就是为我的所有选择赋予相同的新类名称，并像这样初始化它们： <select class="form-control select2normalWithouClear edu-level mySelectDropdown" data-placeholder="Select Education Level"><option>Test 1</option><option>Test 2</option><option>Test 3</option></select> <select class="form-control select2normalWithouClear edu-instituteName mySelectDropdown" data-placeholder="Select Institution Name"><option>Test 1</option><option>Test 2</option><option>Test 3</option></select> 初始化它： $('.mySelectDropdown').select2({ placeholder: $(this).data('placeholder') });
我从服务器收到以下格式的响应： [{"key":"空闲时间","values":[{"x":"SADSA","y":"4.0"},{"x":"FDDG","y":"6.0" },{"x":"FF","y":"4.15"}]},{"key":"运行时间","values":[...
我想禁用网页上键盘的左右箭头键，以防止滚动到上一张或下一张幻灯片。 我有这个代码： jQuery(文档).ready(函数($){ 文档.onkeydow...