select2：无法读取未定义的属性“id”答案

【问题标题】：select2: cannot read property 'id' of undefinedselect2：无法读取未定义的属性“id”
【发布时间】：2018-10-01 20:51:30
【问题描述】：

我使用的是 Select2 4.0.6，我遇到了如下错误：

allowClear 在选择时给出“未捕获的类型错误：无法读取未定义的属性 'id'”。

我该如何修复这个错误？

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.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>
</head>
<body>
    <select role="select" id="myoption">
        <option value="001">abcs </option><option value="002">dshdsh</option><option value="003">A</option>
        <option value="004">ANAM CO</option>
    </select>
</body>
</html>
<script>
    $("#myoption").select2({
        allowClear: true,
        width: '300px',
        height: '34px'
        //data: data
    });
</script>

【问题讨论】：

我没有从您的 sn-p 中看到任何错误。
点击选择中的x，你会看到错误。

标签： javascript jquery html jquery-select2

【解决方案1】：

如果您将debug 属性设置为true，您将看到一条警告消息。

allowClear 选项应与 placeholder 选项。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.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>
</head>
<body>
    <select role="select" id="myoption">
        <option value="001">abcs </option><option value="002">dshdsh</option><option value="003">A</option>
        <option value="004">ANAM CO</option>
    </select>

</body>
</html>
<script>
 $("#myoption").select2({
        allowClear: true,
        width: '300px',
        height: '34px',
        debug: true
        //data: data
    });
</script>

所以你必须定义一个占位符：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.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>
</head>
<body>
    <select role="select" id="myoption">
        <option value="001">abcs </option><option value="002">dshdsh</option><option value="003">A</option>
        <option value="004">ANAM CO</option>
    </select>

</body>
</html>
<script>
 $("#myoption").select2({
        allowClear: true,
        width: '300px',
        height: '34px',
        placeholder: 'select..'
        //data: data
    });
</script>

【讨论】：

"allowClear 选项应与占位符选项结合使用。" - 太好了...
这也解决了我的问题。我认为选择 2 可能会在文档中包含该信息。

【解决方案2】：

在我的情况下，data-placeholder 的帮助如下所示：

选择元素：

<select class="form-control select2" data-placeholder="All" required="required" id="manager_id" name="filter[manager_id]" tabindex="-1" aria-hidden="true">
    <option value="1" selected="selected">Manager 1</option>
    <option value="2" selected="selected">Manager 2</option>
</select>

JS：

$('.select2').each(function(){
    var select = $(this);
    select.select2({
         width: '100%',
         allowClear: !select.prop('required'),
         language: {
            noResults: function () {
                return "{{ __('No results found') }}";
            }
        }
    });
});

【讨论】：