検索

ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery は選択したドロップダウン リスト データを動的に表示します

jQuery は選択したドロップダウン リスト データを動的に表示します

php中世界最好的语言
php中世界最好的语言オリジナル
2018-03-14 17:56:392215ブラウズ

今回は、jQuery選択ドロップダウンリストデータの動的表示について説明します。jQuery が選択ドロップダウンリストデータを動的に表示するために使用できる注意事項は何ですか? 以下は実際的なケースです。一見。

まずランニング効果を見てみましょう:

具体的なコードは次のとおりです: 

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

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、こちらをご覧ください。 PHP 中国語 Web サイトの他の関連記事にも注目してください。

推奨読書:

全画面スクロールプラグインfullpage.jsの使用方法の詳細な説明

同じイベントが繰り返しトリガーされるのを防ぐ方法

次の場合に、より多くのコンテンツを自動的にロードする方法スクロールバーが一番下にスライドします

以上がjQuery は選択したドロップダウン リスト データを動的に表示しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：jsはcanvasで生成した画像の保存や画像の直接保存を実現します次の記事：jsはcanvasで生成した画像の保存や画像の直接保存を実現します

関連記事

続きを見る