Maison > interface Web > js tutoriel > Explication détaillée d'exemples de sélection unique et multi-sélection déroulante angulaire select2

Explication détaillée d'exemples de sélection unique et multi-sélection déroulante angulaire select2

零下一度
Libérer: 2017-06-25 09:11:57
original
6364 Les gens l'ont consulté

Compatibilité :

Importer un fichier

/select2.min.js/select2.min.css
Copier après la connexion

html

<select class="form-control selectName" multiple="multiple">//设置class名为selectName;配置为多选 multiple
        <option value="1" disabled="disabled">本人</option>   //设置一项option为不可选 disabled="disabled"
        <option value="2">父母</option>
        <option value="3">配偶</option>
        <option value="4">子女</option>
        <option value="5">其他</option>
        <option value="6">全部</option>
</select>
Copier après la connexion

js

$(".custAndInsRelationRange").select2({
     placeholder: "--请选择--";     //设置select的默认显示文字});
Copier après la connexion

Pièce jointe :

select2 ----- Sélection unique attribution de valeur

html:

<select class="form-control premPeriod" ng-model="selectModel" ng-options="item.value as item.name for item in selectDataList"></select>
Copier après la connexion
<em><br>//ng-model="selectModel" 设置ng-model,它的值等于 item.value<br><br>//selectDataList是接口数据</em>
Copier après la connexion
//select下拉显示的值是item.name
Copier après la connexion

js:

$(".premPeriod").select2({ placeholder: "--请选择--"; //初始化 });
Copier après la connexion
$scope.selectModel= '' //直接操作ng-model上的值
Copier après la connexion

select2 ----- Affectation de valeurs à sélection multiple

html :

<select class="form-control premPeriod" multiple="multiple" id="premPeriod" ng-options="item.value as item.name for item in selectDataList">
        <option value="1">5</option>
        <option value="2">10</option>
        <option value="3">15</option>
        <option value="4">20</option>
</select>
Copier après la connexion

js :

$(".premPeriod").select2({ placeholder: "--请选择--";  });//初始化
Copier après la connexion
$scope.selectModel= $("#premPeriod").val();//取select值

$scope.defaultData = ['2','3'];//默认值
Copier après la connexion
$(".premPeriod").val($scope.defaultData);//设置select的默认值
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal