创建动态菜单或下拉列表的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代码段中的一小部分，建议平时注意收集或自己编写这样的基础代码段，它们能在很多项目中使用或通过一些改造提供更完善的功能，使用这些代码段将为你节省下大量的开发时间。

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

判断日期是否有效的JavaScript代码段

获取一组元素的最大宽度或高度JavaScript代码

以上就是创建动态菜单或下拉列表的JavaScript代码的详细内容，更多请关注Gxl网其它相关文章！