首頁  >  文章  >  web前端  >  建立動態選單或下拉清單的JavaScript程式碼

建立動態選單或下拉清單的JavaScript程式碼

php中世界最好的语言
php中世界最好的语言原創
2018-03-16 16:42:292109瀏覽

這次帶給大家創建動態選單或下拉清單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中文網其它相關文章!

推薦閱讀:

判斷日期是否有效的JavaScript程式碼片段

 取得一組元素的最大寬度或高度JavaScript程式碼

以上是建立動態選單或下拉清單的JavaScript程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn