select2: cannot read property ‘id’ of undefined

Question

If you set the debug property to true you’ll see a warning message.

The allowClear option should be used in combination with the
placeholder option.

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

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

Leave a Comment Cancel reply