javascript - 对象 [object Object] 没有方法 'select2'

Question

这里我包含了脚本:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type='text/javascript' src='//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js'></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link href="http://ivaynberg.github.com/select2/select2-3.3.2/select2.css" rel="stylesheet" type="text/css" />
<script src="http://ivaynberg.github.com/select2/select2-3.3.2/select2.js"></script>

HTML:

<input  type="hidden" id="parcele" />

页面底部的jquery代码:

<script>
function formatValues(data) {
    return data.ime_prezime;
}

$('#parcele').select2({
    ajax: {
        dataType: "json",
        url: "json.php",
        results: function (data) {
            return {results: data};
        }
    },
    width: "300px",
    formatResult: formatValues,
    formatSelection: formatValues,
    multiple: true
});
</script>

但我收到错误:Uncaught TypeError: Object [object Object] has no method 'select2'

这里有什么问题？没看懂。。。

Answer 1

您需要等到 jQuery 和 select2.js 加载完毕:

function formatValues(data) {
    return data.ime_prezime;
}

$(document).ready(function() { // add this
    $('#parcele').select2({
        ajax: {
            dataType: "json",
            url: "json.php",
            results: function (data) {
                return {results: data};
            }
        },
        width: "300px",
        formatResult: formatValues,
        formatSelection: formatValues,
        multiple: true
    });
}); // add this

编辑:我发现了你的问题:

1. 在您位于 http://agroagro.com/template/tema/zadaci.html# 的实际页面上没有任何带有 id“parcele”的元素- 我认为您正在考虑具有 id“parcela”的元素(注意“a”而不是“e”)。

2. 您实际上有两个具有 id“parcela”的元素，但 HTML id 必须是唯一的。

要解决此问题:重命名具有 id“parcela”的元素之一，然后在现有 JavaScript 中具有“parcele”的位置使用其中一个元素。

此外，为了验证如果您修复命名问题一切正常，我创建了 this jsFiddle ，它工作正常。