无法将选项列表添加到多个选择jQuery
无法将选项列表添加到多个选择jQuery
提问于 2019-06-01 22:17:24
我想创建像this示例插件一样的多选选项列表。选项列表是使用对数据库的ajax调用填充的。ajax调用运行良好，但是没有填充选项列表。我也关注了这个guide。任何帮助我都会非常感谢。
HTML
<div class="form-group">
<label for="langOpt">Select Option</label>
<select class="form-control" name="langOpt[]" multiple id="langOpt">
<!--option list-->
</select>
</div>插件调用
<script>
$('select[multiple]').multiselect();
</script>jQuery
<script>
$('#langOpt').click(function () {
$.ajax({
type : "GET",
dataType :'json',
url : "<?php echo base_url('registration/get_opton_list') ?>",
success : function(data) {
$('#langOpt').html('');
jQuery(data).each(function(i, item){
$('#langOpt').append("<option value='"+ item.optionId+"'>" + item.optionName+ "</option>");
//this ensure the ajax call, values print on console
console.log(item.optionId);
console.log(item.optionName);
});
}
});
});
</script>更新:在ajax中成功调用插件会出现错误
Uncaught TypeError: $(...).multiselect is not a function
at Object.<anonymous> ((index):190)
at Function.each (jquery.min.js:2)
at k.fn.init.each (jquery.min.js:2)
at Object.success ((index):183)
at c (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at l (jquery.min.js:2)
at XMLHttpRequest.<anonymous> (jquery.min.js:2)
(anonymous) @ (index):190
each @ jquery.min.js:2
each @ jquery.min.js:2
success @ (index):183
c @ jquery.min.js:2
fireWith @ jquery.min.js:2
l @ jquery.min.js:2
(anonymous) @ jquery.min.js:2
load (async)
send @ jquery.min.js:2
ajax @ jquery.min.js:2
(anonymous) @ (index):176
dispatch @ jquery.min.js:2
v.handle @ jquery.min.js:2回答 2
Stack Overflow用户
发布于 2019-06-01 22:36:37
试着改变
jQuery(data).each(function(i, item){
$('#langOpt').append("<option value='"+ item.optionId+"'>" + item.optionName+ "</option>");
//this ensure the ajax call, values print on console
console.log(item.optionId);
console.log(item.optionName);
});↓
$.each(data, function (i, item) {
$('#langOpt').append("<option value='"+ item.optionId+"'>" + item.optionName+ "</option>");
//this ensure the ajax call, values print on console
console.log(item.optionId);
console.log(item.optionName);
});看看这里：https://www.sitepoint.com/jquery-each-function-examples/
诚挚的问候,
布拉卡
Stack Overflow用户
发布于 2019-06-01 22:46:23
请在ajax响应中重新应用多选插件(成功)
<script>
$('#langOpt').click(function () {
$.ajax({
type : "GET",
dataType :'json',
url : "<?php echo base_url('registration/get_opton_list') ?>",
success : function(data) {
$('#langOpt').html('');
jQuery(data).each(function(i, item){
$('#langOpt').append("<option value='"+ item.optionId+"'>" + item.optionName+ "</option>");
$('#langOpt').multiselect();
//this ensure the ajax call, values print on console
console.log(item.optionId);
console.log(item.optionName);
});
}
});
});
注意:请确保插件的CSS和JS已成功添加到您的页面。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56407516
复制相关文章
相似问题
腾讯云开发者
