Parfois, il existe de nombreuses options dans la liste déroulante, et l'utilisateur passera beaucoup de temps à faire des choix. Avec l'aide du sélecteur de bootstrap, c'est un bon choix.
Besoin d'introduire des ressources connexes, l'adresse cdn est https://www.bootcdn.cn/bootstrap-select/
Il est recommandé que l'ordre d'introduction css soit 1. bootstrap-select.css 2. bootstrap.css
<link rel="stylesheet" href="../static/css/bootstrap-select.css">
<link rel="stylesheet" href="../static/css/bootstrap/css/bootstrap.css" media="screen">
<link rel="stylesheet" href="../static/css/bootstrap-datetimepicker.min.css">Il est recommandé que l'ordre d'introduction de js soit 1. jquery.js 2. bootstrap.js 3.bootstrap-select.js
<script src="../static/js/jquery-3.4.1.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/bootstrap-select.js"></script>Exemple: Notez que les caractères tapés dans la zone de recherche auront des valeurs différentes dans les états demi-largeur chinois et anglais.
<div class="col-md-4" style="padding:0;">
<select id="selectSf" class="selectpicker" multiple data-hide-disabled="true" data-size="5" data-live-search="true">
<option value="00000000" selected="">alphabet</option>
<option value="10000000">aa</option>
<option value="20000000">bbb</option>
<option value="20000000">cccc</option>
<option value="30000000">ddddd</option>
<option value="40000000">eeeeee</option>
</select>
</div>Une analyse:
1. class = "selectpicker"; liste déroulante ordinaire
2. tittle = "Veuillez sélectionner un élément de données"; l'effet est le même que celui de l'espace réservé
3. class = "selectpicker" multiple; utilisé ensemble pour réaliser une sélection multiple
4. data-live-search = "true"; ouvrir la recherche floue, la valeur par défaut est false, vous devez définir manuellement pour ouvrir
5. data-max-options = "2"; Définissez le nombre de choix multiples, au plus 2 options peuvent être sélectionnées à ce moment
6.data-style = "btn-primary"; le style est sélectionné par défaut, le style de bouton de bootstrap
7. data-size = "10"; définir le nombre d'options affichées dans la liste déroulante
8. data-dropup-auto = "false", ce qui signifie que la liste déroulante se développe vers le bas par défaut
9. $ ('. Selectpicker'). Selectpicker ('selectAll'); Sélectionner tout:
$ ('. Selectpicker'). Selectpicker ('deselectAll'); Sélection inversée:
$ ('. Selectpicker'). Selectpicker ('mobile' ); S'adapter au mode téléphone mobile:
Problème: après l'ajout dynamique de données, la liste déroulante n'est pas rendue et aucune erreur n'est signalée. Ces valeurs d'option existent lorsque le navigateur affiche le code source. Ou, il prend effet la première fois que vous entrez dans la page après la compilation, et il devient invalide après l'actualisation ou le passage à une autre interface.
traiter avec:
$(function () {
$('.selectpicker').selectpicker('refresh');
$('.selectpicker').selectpicker('render');
})Valeur:
La valeur sélectionnée peut être obtenue via jquery: let source = $ ("# select"). Val (). Join ();
Le résultat sélectionné étant un tableau, n'oubliez pas de le convertir en chaîne lors de son utilisation.
Affectation dynamique:
$ ("# select"). append ("<option value = '1111'> text </option>");