J'ai utilisé Select2 4.0.6, j'ai un bug comme ci-dessous:
allowClear donne "Uncaught TypeError: Impossible de lire la propriété 'id' d'undefined" lorsqu'il est utilisé sur select.
Comment puis-je corriger ce bogue?.
<!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>
Si vous définissez la propriété debug
sur true
, vous verrez un message d'avertissement.
L'option
allowClear
doit être utilisée en combinaison avec l'optionplaceholder
.
<!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>
Vous devez donc définir un espace réservé par défaut.
<!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>
Dans mon cas data-placehodler
aidé:
Sélectionnez l'élément:
<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') }}";
}
}
});
});