ホームページ >ウェブフロントエンド >jsチュートリアル >動的なメニューまたはドロップダウン リストを作成するための JavaScript コード

動的なメニューまたはドロップダウン リストを作成するための JavaScript コード

php中世界最好的语言
php中世界最好的语言オリジナル
2018-03-16 16:42:292178ブラウズ

今回は、動的メニューまたはドロップダウン リストを作成するための JavaScript コードを紹介します。JavaScript を使用して動的メニューまたはドロップダウン リストを作成する場合の 注意事項 は何ですか? 、見てみましょう。

多くのシナリオでは、メニュー、ドロップダウン リスト、またはリスト項目を動的に作成する必要があります。以下は、上記の機能を実装するための最も基本的なコードです。実際のニーズに応じて拡張できます。

function makeMenu(items, tags) {
  tags = tags || ['ul', 'li']; // default tags
  var parent = tags[0];  var child = tags[1]; 
  var item, value = &#39;&#39;;  for (var i = 0, l = items.length; i < l; i++) {
    item = items[i];    // Separate item and value if value is present
    if (/:/.test(item)) {
      item = items[i].split(&#39;:&#39;)[0];
      value = items[i].split(&#39;:&#39;)[1];
    }    // Wrap the item in tag
    items[i] = &#39;<&#39;+ child +&#39; &#39;+
      (value && &#39;value="&#39;+value+&#39;"&#39;) +&#39;>&#39;+ // add value if present
        item +&#39;</&#39;+ child +&#39;>&#39;;
  } 
  return &#39;<&#39;+ parent +&#39;>&#39;+ items.join(&#39;&#39;) +&#39;</&#39;+ parent +&#39;>&#39;;
}

使用方法:

// Dropdown select monthmakeMenu(
  [&#39;January:JAN&#39;, &#39;February:FEB&#39;, &#39;March:MAR&#39;], // item:value
  [&#39;select&#39;, &#39;option&#39;]
); 
// List of groceriesmakeMenu(
  [&#39;Carrots&#39;, &#39;Lettuce&#39;, &#39;Tomatos&#39;, &#39;Milk&#39;],
  [&#39;ol&#39;, &#39;li&#39;]
);

上記は、実用的な JavaScript コード スニペットのほんの一部です。このような基本的なコード スニペットを自分で収集または作成することをお勧めします。これらは、多くのプロジェクトで使用することも、より完全なコード スニペットを提供することもできます。関数にいくつかの変更を加え、これらのコード スニペットを使用すると、開発時間を大幅に節約できます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイト

その他の関連記事に注目してください。

推奨読書:

日付が有効かどうかを判断するための JavaScript コード スニペット

要素のグループの最大幅または高さを取得する JavaScript コード

以上が動的なメニューまたはドロップダウン リストを作成するための JavaScript コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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