我有一个select2元素,像这样:
$(document).ready(function () {
$('.select2').select2({
multiple: true
});
});
.select2{
width:100%
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select name="test" class="select2" multiple='multiple'>
<option value='A'>A</option>
<option value='B'>B</option>
<option value='C'>C</option>
<option value='D'>D</option>
</select>
由于某种原因,当我添加值时,它没有显示为选定值,但是在从表单中发布数据时,我从该选择中接收了所有值。示例:
保存表单并重新渲染页面后,select2现在将显示所选值。 See this picture.
如果我尝试使用X删除任何值,则不会从“ main”元素中删除该值,但会从选项中取消选择该值,并且表单将再次提交正确的值。
我尝试过Google,但没有找到任何帮助。我正在使用的Select2版本是4.0.5。该页面中还包含Bootstrap v3和jQuery 1.11.0。我尝试过更改顺序或包含CSS和JS,但似乎没有任何区别。为select2应用引导主题也没有帮助。
有什么主意吗?
答案 0 :(得分:0)
似乎工作正常。
$(document).ready(function () {
$('.select2').select2({
multiple: true
});
$('button').on('click',function(){
alert($('.select2').val());
});
});
.select2{
width:150px;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<select name="test" class="select2" multiple='multiple'>
<option value='A'>A</option>
<option value='B'>B</option>
<option value='C'>C</option>
<option value='D'>D</option>
</select>
<button>get values</button>