select2:无法读取未定义的属性“id”
Posted
技术标签:
【中文标题】select2:无法读取未定义的属性“id”【英文标题】:select2: cannot read property 'id' of undefined 【发布时间】:2018-10-01 20:51:30 【问题描述】:我使用的是 Select2 4.0.6,我遇到了如下错误:
allowClear 在选择时给出“未捕获的类型错误:无法读取未定义的属性 '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>
【问题讨论】:
我没有从您的 sn-p 中看到任何错误。 点击选择中的x
,你会看到错误。
【参考方案1】:
如果您将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>
所以你必须定义一个占位符:
<!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>
【讨论】:
"allowClear 选项应与占位符选项结合使用。" - 太好了... 这也解决了我的问题。我认为选择 2 可能会在文档中包含该信息。【参考方案2】:在我的情况下,data-placeholder
的帮助如下所示:
选择元素:
<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') ";
);
);
【讨论】:
以上是关于select2:无法读取未定义的属性“id”的主要内容,如果未能解决你的问题,请参考以下文章
Angular给出TypeError:“无法读取未定义的属性'id'”