个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
当我尝试使用两个 selectpicker 但在不同的选项卡中时遇到问题，如下面的代码
$(document).ready(function(){
$('.selectpicker').selectpicker({
style: 'btn-default'
});
})
$('#test').click(function(){
var test = $('#okay').serialize();
alert(test);
console.log(test);
})<link rel="stylesheet "type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<form id="okay">
<input class="form-control" type="text" name="1">
<select class="selectpicker form-control" name="okse" id="okse">
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
</select>
<input class="form-control" type="text" name="4">
</div>
<div id="menu1" class="tab-pane fade">
<input class="form-control" type="text" name="6">
<input class="form-control" type="text" name="7">
<input class="form-control" type="text" name="8">
<select class="selectpicker form-control" name="okse1" id="okse1">
<option value="Matt">matt</option>
<option value="Dessy">Dess</option>
</select>
</form>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
<hr>
<br>
<button id="test">Click me</button>
</body>
</html>我得到的结果是
1=&okse=2010&4=&6=&7=&8=
id okse1 未包含在 jquery 序列化中。我期望的是如下:
1=&okse=2010&4=&6=&7=&8=&okse1=matt
或者我得到一个空结果，但 id okse1 已序列化
1=&okse=2010&4=&6=&7=&8=&okse1=
正如您在上面的代码片段中看到的，当我单击 button#test 时，ID 为 okse1 的 selectpicker 并未序列化。如果选择器位于不同的选项卡中，则它不会序列化。我该如何解决这个问题？
最佳答案
按照建议修复您的 HTML 标记。表单在第二个选项卡的 div 之前关闭。在第一个中打开。这是固定的 fiddle :https://jsfiddle.net/hkxewpbn/
<form id="okay">
<div id="home" class="tab-pane fade in active">
<input class="form-control" type="text" name="1">
<select class="selectpicker form-control" name="okse" id="okse">
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
</select>
<input class="form-control" type="text" name="4">
</div>
<div id="menu1" class="tab-pane fade">
<input class="form-control" type="text" name="6">
<input class="form-control" type="text" name="7">
<input class="form-control" type="text" name="8">
<select class="selectpicker form-control" name="okse1" id="okse1">
<option value="Matt">matt</option>
<option value="Dessy">Dess</option>
</select>
关于javascript - 我们如何在不同选项卡上序列化 selectpicker 插件文本？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47481396/
25
4
0
我正在使用下面的代码，我的问题是当我第一次选择时，位置列表没有加载。当我选择第二项时，子列表中的第一项将被填充。如果我选择第三个，则会填充第二个子项。 我确定我在某个地方犯了一个愚蠢的错误。
是否可以在多选选择器中使用 selected-text-format “static” 和 selected-text-format “count”？ 这是我当前的选择器: 1 2
我正在尝试使用 bootstrap-select并从 javascript 引用它，但我总是收到错误:.selectpicker is not a function 我读到的有关此错误的所有内容都表明
我有两个下拉列表，一个用于国家/地区，另一个用于州。我希望状态根据国家/地区显示。我将 selectpicker 类添加到两个下拉列表中。但是当我在控制台中更改国家/地区时，它显示错误 错误 Type
我正在使用选择器 plugin .现在，我尝试默认选择所有选项，或者至少选择一个按钮来选择所有选项，而无需在下拉列表中单击。 目前演示仅在单击下拉菜单并单击按钮后才有效。 有什么想法吗？ $('.se
我正在为表单使用 bootstrap-select。我在 HTML 文件的 header 中包含脚本(jquery、bootstrap-select)。 所有具有类“selectpicker
我正在使用 selectpicker，下拉列表显示两次，如图所示 当我删除 selectpicker 类时，它显示正常的下拉列表 Select a
我有一个运行良好的 Bootstrap 选择器(选择时会触发事件)。我有一个代码，当第一个(正在工作)发生变化时，它会创建第二个选择器。问题是，第二个选择器在被选择时不会触发事件(就像我用 jQuer
当我尝试使用两个 selectpicker 但在不同的选项卡中时遇到问题，如下面的代码 $(document).ready(function(){ $('.selectpicker').select
我有一个 Bootstrap Selectpicker 控件，我想用 Javascript 填充它，代码可以在简单的选择输入下正常工作，但是当我添加 class="selectpicker" 时，它不
我编写了一个函数来更新Bootstrap selectpicker: function LoadProductDetailings() { var productId = $(this).va
我需要选项 x 始终在所选内容中被选中。(为此选项禁用取消选择)。 这是我当前的模板代码 X Y 期望的输出:选项 X 应该是强制性的/始终选择/不能取消选择。 最佳答案 已
我用这个做了一个全局模态 #GlobalModal .modal-body .body-content { margin:0;
我正在尝试制作具有“无限深度”的 optional 。我创建了这些表，但是无法将它们提取到 selectpicker 中。我该怎么做？ 在我的例子中，扇区是类别 这就是我所做的: CREATE TAB
我计划实现一个选择器，它将允许用户从下拉列表中选择多个选项。问题是，当我的后端从这个选择器中提取值时，这些值必须按照用户选择的顺序，而不是原始下拉列表的顺序。希望能得到一些帮助!预先非常感谢! 我正在
我正在使用 Bootstrap 选择器。它在页面加载时工作正常，但在下拉列表更改时它会给出 selectpicker 不是函数的错误。初始化 $(document).ready(function()
我正在使用 bootstrap selectpicker。我必须在弹出窗口的中心显示 selectpicker select 下拉菜单，但我不想让文本在 select 下拉菜单中居中。我可以显示按钮但
我正在使用以下 JS 为我的选择提供选项: //**** Instance des Bootstrap-SelectPicker **** $('.selectpicker').selectp
通过克隆 html 使用 javascript 动态创建选择列表，并在创建选择列表后，尝试使用 $(MySelectList).selectPicker(); 初始化选择列表似乎成功了，但也成功了调用
我正在尝试更改显示所选选项的选择器框的宽度，但无论我如何尝试都无法更改它，也无法更改框的颜色。 如有任何想法或建议，我们将不胜感激。 我假设应该更改框宽度的代码片段如下(如您所见，我一直将其设置为 2
我是一名优秀的程序员,十分优秀！