创建动态菜单或下拉列表的JavaScript代码
程序员文章站
2022-04-13 21:05:24
...
这次给大家带来创建动态菜单或下拉列表的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代码段中的一小部分,建议平时注意收集或自己编写这样的基础代码段,它们能在很多项目中使用或通过一些改造提供更完善的功能,使用这些代码段将为你节省下大量的开发时间。
相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!
推荐阅读:
以上就是创建动态菜单或下拉列表的JavaScript代码的详细内容,更多请关注其它相关文章!
推荐阅读
-
如何在读取Excel文件时创建列表的下拉菜单?
-
javascript 获取select下拉列表值的代码
-
JavaScript结合PHP实现网页制作中双下拉菜单的动态实现
-
JavaScript+PHP应用一:网页制作中双下拉菜单的动态实现(转贴)_PHP
-
如何使用JavaScript实现创建动态下拉菜单效果
-
动态创建的表格单元格中的事件实现代码_javascript技巧
-
Javascript实现动态菜单添加的实例代码_javascript技巧
-
JavaScript实现左右下拉框动态增删的示例代码
-
动态创建样式表在各浏览器中的差异测试代码_javascript技巧
-
javascript实现dom动态创建省市纵向列表菜单的方法_javascript技巧