web-dev-qa-db-ja.com

未定義のselect2のプロパティ 'id'を読み取れません

Select2 4.0.6を使用しましたが、以下のようなバグがあります。

選択時に使用すると、allowClearは "Uncaught TypeError：Undefined of property 'id' of undefined"を返します。

どうすればこのバグを修正できますか？.

<!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>
javascriptjqueryhtmljquery-select2
13
Hong Van Vit

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>

したがって、デフォルトとして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>
17
Mihai Alexandru-Ionut

私の場合 data-placehodler支援：

要素を選択：

<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') }}";
            }
        }
    });
});
0
MingalevME