這次帶給大家創建動態選單或下拉清單的JavaScript程式碼,使用的JavaScript建立動態選單或下拉清單的注意事項有哪些,下面就是實戰案例,一起來看看。
在許多場景中,我們都需要動態地建立選單、下拉清單或清單項目。以下是一段最基礎的程式碼實作上面的功能,你可以依照實際需求進行對應的擴充。
function makeMenu(items, tags) { tags = tags || ['ul', 'li']; // default tags var parent = tags[0]; var child = tags[1]; var item, value = ''; 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(':')[0]; value = items[i].split(':')[1]; } // Wrap the item in tag items[i] = '<'+ child +' '+ (value && 'value="'+value+'"') +'>'+ // add value if present item +'</'+ child +'>'; } return '<'+ parent +'>'+ items.join('') +'</'+ parent +'>'; }
使用方法:
// Dropdown select monthmakeMenu( ['January:JAN', 'February:FEB', 'March:MAR'], // item:value ['select', 'option'] ); // List of groceriesmakeMenu( ['Carrots', 'Lettuce', 'Tomatos', 'Milk'], ['ol', 'li'] );
以上只是那些實用JavaScript程式碼段中的一小部分,建議平時注意收集或自己寫這樣的基礎程式碼段,它們能在很多專案中使用或透過一些改造提供更完善的功能,使用這些程式碼片段將為你節省下大量的開發時間。
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是建立動態選單或下拉清單的JavaScript程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!