【问题标题】:select2 does not render selected valuesselect2 不呈现选定的值
【发布时间】:2018-08-24 06:52:21
【问题描述】:

我有一个这样的 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>

由于某种原因,当我添加值时,它没有显示为选中状态,但是在从表单发布数据时,我会从这个选择中接收到所有值。示例:

Options C and D are selected, in options dropdown they are highlighted as selected, but in "main" element, they are not.

保存表单并重新渲染页面后,select2 现在会显示选定的值。 See this picture.

如果我尝试使用 X 删除任何值,它不会从“主”元素中删除,但会从选项中取消选择,并且表单将再次提交正确的值。

我试图用谷歌搜索,但没有找到任何帮助。我使用的 Select2 版本是 4.0.5。 Bootstrap v3 和 jQuery 1.11.0 也包含在页面中。我尝试过更改顺序或包括 CSS 和 JS,但似乎没有任何区别。为 select2 应用引导主题也没有帮助。

知道可能出了什么问题吗?

【问题讨论】:

  • 你为什么在 jquery 中使用 multiple: true,你已经在 select 标签中声明为 multiple="multiple" 并检查是否有任何 display: none 属性应用于 li 标签

标签: javascript css jquery-select2


【解决方案1】:

它似乎工作正常。

$(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>

【讨论】:

    猜你喜欢
    • 2016-07-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-10-27
    • 2016-11-11
    • 1970-01-01
    • 2012-08-05
    • 1970-01-01
    相关资源
    最近更新 更多