无法读取未定义的select2的属性"id"

Hon*_*Vit 11 html javascript jquery jquery-select2

我用的是Select2 4.0.6,我有一个如下的bug:

allowClear在select上使用时给出"未捕获的TypeError:无法读取未定义的属性'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>
Run Code Online (Sandbox Code Playgroud)

Mih*_*nut 20

如果您将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>
Run Code Online (Sandbox Code Playgroud)

因此,您必须将占位符定义为默认值.

<!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>
Run Code Online (Sandbox Code Playgroud)

  • “ allowClear选项应与占位符选项结合使用。” -太好了... (3认同)
  • 这也解决了我的案子。我认为 select 2 可能会在文档中包含该信息。 (2认同)