suchen

Heim >Web-Frontend >js-Tutorial >jQuery zeigt ausgewählte Dropdown-Listendaten dynamisch an

jQuery zeigt ausgewählte Dropdown-Listendaten dynamisch an

php中世界最好的语言
php中世界最好的语言Original
2018-03-14 17:56:392182Durchsuche

Dieses Mal bringe ich Ihnen jQuerydynamische Anzeige der ausgewähltenDropdown-ListeWas sind die Vorsichtsmaßnahmen für jQuery, um ausgewählte Dropdown-Listen dynamisch anzuzeigen? Listendaten? Das Folgende sind Werfen wir einen Blick auf praktische Fälle.

Werfen wir zunächst einen Blick auf den Laufeffekt:

Der spezifische Code lautet wie folgt: 

<!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>

Ich glaube, Sie haben es gesehen. Im Fall dieses Artikels beherrschen Sie die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung des Vollbild-Scrolling-Plug-ins fullpage.js

Wie um zu verhindern, dass dasselbe Ereignis wiederholt ausgelöst wird

So laden Sie automatisch mehr Inhalte, wenn die Bildlaufleiste nach unten gleitet

Das obige ist der detaillierte Inhalt vonjQuery zeigt ausgewählte Dropdown-Listendaten dynamisch an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：js realisiert das Speichern des von Canvas generierten Bildes oder das direkte Speichern eines BildesNächster Artikel：js realisiert das Speichern des von Canvas generierten Bildes oder das direkte Speichern eines Bildes

In Verbindung stehende Artikel

Mehr sehen