jquery implémente le code d'effets spéciaux d'embellissement de la liste déroulante sélectionnée-js tutoriel-php.cn

jquery implémente le code d'effets spéciaux d'embellissement de la liste déroulante sélectionnée

PHPz

Libérer： 2018-09-29 10:55:19

avant

1706 Les gens l'ont consulté

Cet article présente principalement l'implémentation de jquery pour embellir la liste déroulante de sélection. L'effet est simple et élégant. Il est recommandé à tous les amis dans le besoin de s'y référer.

Il s'agit d'un code d'effet spécial basé sur jquery pour implémenter l'embellissement de la liste déroulante de sélection. Les utilisateurs peuvent sélectionner le contenu du menu déroulant. C'est un code source d'effet spécial très pratique.

L'implémentation jquery du code d'effets spéciaux d'embellissement de la boîte déroulante sélectionnée partagé avec tout le monde est la suivante

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/g.css" type="text/css" rel="stylesheet" />
<link href="css/css.css" type="text/css" rel="stylesheet" />
</head>
<body>
<p class="searchbox">
 <p class="searchZone clearfix">
 <form target="_blank">
 <fieldset>
 <label>
 <input type="text" class="text" name="keyword" onblur="if(this.value==&#39;&#39;){this.value=&#39;请输入关键字&#39;;this.style.color=&#39;#aaa&#39;}" onfocus="if(this.value==&#39;请输入关键字&#39;){this.value=&#39;&#39;;this.style.color=&#39;#333&#39;}" value="请输入关键字" />
 </label>
 <p class="left">
 <select style="display: none;" name="mySle" id="mySle">
 <option selected="selected" value="0">全站搜索</option>
 <option value="1">素材搜索</option>
 <option value="2">设计欣赏</option>
 <option value="3">桌面壁纸</option>
 <option value="4">设计教程</option>
 </select>
 </p>
 <label>
 <button type="submit">快给我搜一下</button>
 </label>
 </fieldset>
 </form>
 <script type="text/javascript" src="js/jquery.js"></script>
 <script type="text/javascript" src="js/selectbox.js"></script>
 <script type="text/javascript"> $(document).ready(function() {$(&#39;#mySle&#39;).selectbox();});</script>
 </p>
</p>
</body>
</html>

Copier après la connexion

Rendu en cours d'exécution :

Adresse de démonstration en ligne ：http://demo.jb51.net/js/2015/jquery-select-xlkmh/

Si vous souhaitez plus d'effets de liste déroulante, vous pouvez cliquez sur Résumé des effets de la liste déroulante jquery/JavaScript.

Ce qui précède est l'implémentation jQuery du code d'effets spéciaux d'embellissement de la liste déroulante sélectionné partagé avec vous. J'espère que vous pourrez l'aimer. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo jQuery !