recherche

Maison  >  Article  >  interface Web  >  Afficher dynamiquement les données de la liste déroulante sélectionnée

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

php中世界最好的语言
php中世界最好的语言original
2018-03-23 15:32:383166parcourir

Cette fois, je vais vous proposer l'affichage dynamique des données de la liste déroulante sélectionnée Quelles sont les précautions pour l'affichage dynamique des données de la liste déroulante sélectionnée Voici un cas pratique ? , jetons un coup d'oeil.

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

Je te crois Je l'ai maîtrisé après avoir lu le cas dans cet article. Méthode, pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Problèmes liés au packaging des ressources statiques vue

Explication détaillée de l'utilisation d'async et wait

Comment utiliser les graphiques électroniques dans Vue.JS

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：
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
Article précédent：Problèmes dans l'empaquetage des ressources statiques vueArticle suivant：Problèmes dans l'empaquetage des ressources statiques vue

Articles Liés

Voir plus