Utilisation du contrôle de sélection d'amorçage-js tutoriel-php.cn

Maison

interface Web

js tutoriel

Utilisation du contrôle de sélection d'amorçage

Oct 16, 2017 am 09:19 AM

使用控件

Ce contrôle s'appuie sur le framework frontal Bootstrap

Pour une utilisation spécifique de ce contrôle, veuillez consulter le lien ci-dessus ; ;

L'une des utilisations de ce contrôle est de rechercher les options de la balise select pour obtenir des options précises. Après tout, il peut y avoir de nombreuses options ;

Maintenant, je souhaite obtenir dynamiquement les données d'option transmises en arrière-plan en tapant des mots-clés dans la barre de recherche, au lieu de lire toutes les données d'un coup puis de rechercher ;

La mise en œuvre spécifique est la suivante :

1. fichiers pertinents :

&lt;head&gt;
     &lt;!-- 引入 Bootstrap样式 --&gt;
      &lt;link href=&quot;${pageContext.request.contextPath}/resources/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;
     &lt;!-- bootstrap-select样式 --&gt;
      &lt;link href=&quot;${pageContext.request.contextPath}/resources/css/select/bootstrap-select.min.css&quot; rel=&quot;stylesheet&quot;&gt;
 
     &lt;!-- jQuery (Bootstrap 依赖于 jQuery) --&gt;
      &lt;script src=&quot;${pageContext.request.contextPath}/resources/js/jquery-3.0.0.min.js&quot;&gt;&lt;/script&gt;
 
     &lt;!-- Bootstrap --&gt;
       &lt;script src=&quot;${pageContext.request.contextPath}/resources/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
 
     &lt;!-- Bootstrap-select 控件 --&gt;
       &lt;script src=&quot;${pageContext.request.contextPath}/resources/js/select/bootstrap-select.min.js&quot;&gt;&lt;/script&gt;
       &lt;script src=&quot;${pageContext.request.contextPath}/resources/js/select/defaults-zh_CN.min.js&quot;&gt;&lt;/script&gt;
 
&lt;/head&gt;

Copier après la connexion

　 2. Sélectionnez la balise

&lt;form id=&quot;addForm&quot; action=&quot;${pageContext.request.contextPath}/admin/authority/manager/saveAdd&quot; method=&quot;post&quot;&gt;
   &lt;p class=&quot;form-group&quot;&gt;    
       &lt;p class=&quot;input-group&quot;&gt;     
          &lt;span class=&quot;input-group-addon&quot; &gt;管理员&lt;/span&gt;
           &lt;!--触发bootstrap-select需添加class=&quot;selectpicker&quot; 搜索功能需添加data-live-search=&quot;true&quot; --&gt;
          &lt;select data-size=&quot;6&quot; class=&quot;form-control selectpicker show-tick&quot; data-live-search=&quot;true&quot; title=&quot;请输入管理员&quot;  id=&quot;select-manager&quot; name=&quot;managerName&quot;                data-selectNameUrl=&quot;${pageContext.request.contextPath}/admin/authority/managerRole/getManagerByName&quot; &gt;    
          &lt;/select&gt;
       &lt;/p&gt;
   &lt;/p&gt;
   &lt;p class=&quot;form-group&quot;&gt;    
       &lt;p class=&quot;input-group&quot;&gt;         
          &lt;span class=&quot;input-group-addon&quot; &gt;角&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;色&lt;/span&gt;
          &lt;select  class=&quot;form-control selectpicker show-tick&quot; data-size=&quot;6&quot; data-live-search=&quot;true&quot;  id=&quot;select-role&quot;  name=&quot;roleName&quot; title=&quot;请选择角色&quot; &gt; 
             &lt;c:forEach var=&quot;selectRole&quot; items=&quot;${selectRoles}&quot; varStatus=&quot;statu&quot;&gt;
                &lt;option    value =&quot;${selectRole.id}&quot;  &gt;${selectRole.roleName}&lt;/option&gt;
             &lt;/c:forEach&gt;
          &lt;/select&gt;
       &lt;/p&gt;
   &lt;/p&gt;
&lt;/form&gt;

Copier après la connexion

Jusqu'à présent, sous la balise select de l'administrateur, je n'ai ajouté aucune balise <option></option>, donc les options sont vides

Rendu :

Ce que je veux réaliser maintenant, c'est déclencher un événement comme dès que je tape un caractère dans la barre de recherche : obtenez dynamiquement les données d'arrière-plan pour ajouter la balise<option></option>,

La solution est d'appeler le développeur. mode de Chrome et recherchez l'étiquette générée par le contrôle bootstrap-select, comme indiqué ci-dessous :

Après avoir connu les étiquettes et les attributs liés à la barre de recherche générés par bootstrap-select, vous pouvez L'événement peut être déclenché en sélectionnant la barre de recherche

<🎜 ; >3. Événement déclencheur :

L'effet est le suivant :

&lt;script type=&quot;text/javascript&quot;&gt;
        
       $().ready(function(){          
             //键入字符触发事件:动态获得后台传入select选项数据 
             
            //请求的url
            var selectNameUrl = $(&quot;#select-manager&quot;).attr(&quot;data-selectNameUrl&quot;);              
            //选择得到搜索栏input，松开按键后触发事件
            $(&quot;#select-manager&quot;).prev().find(&#39;.bs-searchbox&#39;).find(&#39;input&#39;).keyup(function () {                   
                //键入的值
                var inputManagerName =$(&#39;#addForm .open input&#39;).val();                  //判定键入的值不为空，才调用ajax
                if(inputManagerName != &#39;&#39;){
                    $.ajax({
                          type: &#39;Get&#39;,
                          url: selectNameUrl,
                          data: {                     //传递到后台的值                                managerName: inputManagerName
                          },
                          dataType: &quot;Json&quot;,
                          success: function (Selectmanagers) {                                //清除select标签下旧的option签，根据新获得的数据重新添加option标签
                              $(&quot;#select-manager&quot;).empty();                                if (Selectmanagers != null) {               
                                  $.each(Selectmanagers, function (i,Selectmanager) {
                                      $(&quot;#select-manager&quot;).append(&quot; &lt;option value=\&quot;&quot; + Selectmanager.id + &quot;\&quot;&gt;&quot; + Selectmanager.managerName + &quot;&lt;/option&gt;&quot;);
                                  })                                    //必不可少的刷新
                                  $(&quot;#select-manager&quot;).selectpicker(&#39;refresh&#39;);
                                  
                              }
                          }
                    })
                }else
                    //如果输入的字符为空，清除之前option标签
                    $(&quot;#select-manager&quot;).empty();
                    $(&quot;#select-manager&quot;).selectpicker(&#39;refresh&#39;);  
            });     
       });  &lt;/script&gt;

Copier après la connexion

[Recommandation vidéo connexe :

Tutoriel Bootstrap

】

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!

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