jQuery affiche dynamiquement les données de la liste déroulante sélectionnée-js tutoriel-php.cn

jQuery affiche dynamiquement les données de la liste déroulante sélectionnée

php中世界最好的语言

Libérer： 2018-03-14 17:56:39

original

2214 Les gens l'ont consulté

Cette fois, je vous présente jQuery affichage dynamique des données de la liste déroulante de sélection Quelles sont les précautions pour que jQuery affiche dynamiquement la liste déroulante de sélection. lister les données ? Voici un aperçu de cas pratiques.

Jetons d'abord un coup d'œil à l'effet de course :

Le code spécifique est le suivant :

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery动态显示表单</title>
  <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
  <script type="text/javascript">
    //数据集
    var schools = [
      { &#39;id&#39;: 1, &#39;name&#39;: &#39;南京大学&#39; },
      { &#39;id&#39;: 2, &#39;name&#39;: &#39;北京大学&#39; },
      { &#39;id&#39;: 3, &#39;name&#39;: &#39;浙江大学&#39; },
      { &#39;id&#39;: 4, &#39;name&#39;: &#39;清华大学&#39; },
      { &#39;id&#39;: 5, &#39;name&#39;: &#39;湖南大学&#39; },
    ];
    //页面加载运行，将数据集绑定select，显示默认选中学校
    $(function () {
      bindSelect();
      $(&#39;#info&#39;).text($(&#39;#schoolSelect&#39;).val());
    });
    //将数据集绑定select，重新选择学校后显示选中学校
    bindSelect = function () {
      var $schoolSelect = $(&#39;#schoolSelect&#39;);
      $schoolSelect.change(function () {
        $(&#39;#info&#39;).text($(this).val());
      });
      if (schools.length > 0) {
        for (var i = 0; i < schools.length; i++) {
          var item = schools[i];
          if (item.id == 2) {
            $schoolSelect.append(&#39;<option value="&#39; + item.id + &#39;" selected>&#39; + item.name + &#39;</option>&#39;);
          } else {
            $schoolSelect.append(&#39;<option value="&#39; + item.id + &#39;">&#39; + item.name + &#39;</option>&#39;);
          }
        }
      }
    }
  </script>
</head>
<body>
  <form>
    <select id="schoolSelect">
    </select>
    <label id="info"></label>
  </form>
</body>
</html>

Copier après la connexion

Je crois que vous l'avez vu. Vous maîtrisez la méthode dans le cas de cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de l'utilisation du plug-in de défilement plein écran fullpage.js

Comment pour éviter que le même événement ne soit déclenché à plusieurs reprises

Comment charger automatiquement plus de contenu lorsque la barre de défilement glisse vers le bas

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!