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

Question

I used Select2 4.0.6, I have a bug like below:我使用了 Select2 4.0.6，我有一个像下面这样的错误：

allowClear gives "Uncaught TypeError: Cannot read property 'id' of undefined" when used on select.在选择时，allowClear 给出“未捕获的类型错误：无法读取未定义的属性 'id'”。

How can I fix this bug?.我该如何修复这个错误？。

 <!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>

Answer 1

If you set the debug property to true you'll see a warning message.如果您将debug属性设置为true您将看到一条警告消息。

The allowClear option should be used in combination with the placeholder option. 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>

So you have to define a placeholder as default.因此，您必须将占位符定义为默认值。

 <!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>

Answer 2

In my case data-placeholder helped as shown below:在我的情况下， data-placeholder帮助如下所示：

Select element:选择元素：

<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: JS：

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

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

问题描述

2 个解决方案

解决方案1
46 已采纳 2018-04-21 07:37:40

解决方案2
2 2019-12-02 16:05:45

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

问题描述

2 个解决方案

解决方案1 46 已采纳 2018-04-21 07:37:40

解决方案2 2 2019-12-02 16:05:45

解决方案1
46 已采纳 2018-04-21 07:37:40

解决方案2
2 2019-12-02 16:05:45