Django中引导multiselect的Javascript正确吗?
我正在尝试使用Django 1.4.5中的bootstrap multiselect插件创建一个multiselect下拉菜单。链接到插件: 我的form.py是:Django中引导multiselect的Javascript正确吗?,javascript,django,django-forms,Javascript,Django,Django Forms,我正在尝试使用Django 1.4.5中的bootstrap multiselect插件创建一个multiselect下拉菜单。链接到插件: 我的form.py是: weight_training_days = forms.MultipleChoiceField( help_text=u'(Required) Select 3 days', widget=forms.SelectMultiple(attrs={ 'inline': True, 'c
weight_training_days = forms.MultipleChoiceField(
help_text=u'(Required) Select 3 days',
widget=forms.SelectMultiple(attrs={
'inline': True,
'class': 'multiselect',
}),
choices=(
(0, "Mon"),
(1, "Tue"),
(2, "Wed"),
(3, "Thu"),
(4, "Fri"),
(5, "Sat"),
(6, "Sun"),
),
)
我在模板中的表格是:
<form class="form-{{ layout }}" action="" method="post">
{% csrf_token %}
{{ form|as_bootstrap:layout }}
<p class="form-actions">
<input type="submit" value="Submit Changes" class="btn btn-primary">
</p>
</form>
{%csrf_令牌%}
{{form | as_bootstrap:layout}}
以及bootstrap-multiselect.js文件(链接到静态文件夹中)中的js代码:
$(文档).ready(函数(){
$('.multiselect')。multiselect({
按钮类:“btn”,
按钮宽度:“自动”,
按钮容器:“”,
maxHeight:false,
buttonText:功能(选项){
如果(options.length==0){
返回“未选择”;
}
否则如果(options.length>3){
return options.length+“selected”;
}
否则{
所选var=“”;
选项。每个(函数(){
所选+=$(this).text()+',';
});
返回selected.substr(0,selected.length-2)+'';
}
}
});
});
由于某些原因,插件无法工作。仅显示标准的SelectMultiple字段
我在javascript方面的经验非常有限,不知道为什么这个插件不能工作。非常感谢您的任何反馈/帮助。谢谢这个问题是因为我对javascript缺乏经验/知识。我需要下载这个插件的库,这就是bootstrap-multiselect.js文件中的内容。现在效果很好
$(document).ready(function() {
$('.multiselect').multiselect({
buttonClass: 'btn',
buttonWidth: 'auto',
buttonContainer: '<div class="btn-group" />',
maxHeight: false,
buttonText: function(options) {
if (options.length == 0) {
return 'None selected <b class="caret"></b>';
}
else if (options.length > 3) {
return options.length + ' selected <b class="caret"></b>';
}
else {
var selected = '';
options.each(function() {
selected += $(this).text() + ', ';
});
return selected.substr(0, selected.length -2) + ' <b class="caret"></b>';
}
}
});
});