gpt4 book ai didi

javascript - 我们如何在不同选项卡上序列化 selectpicker 插件文本?

转载 作者:行者123 更新时间:2023-12-03 02:59:16 25 4
gpt4 key购买 nike

当我尝试使用两个 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 为 okse1selectpicker 并未序列化。如果选择器位于不同的选项卡中,则它不会序列化。我该如何解决这个问题?

最佳答案

按照建议修复您的 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
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com