Rumah > hujung hadapan web > tutorial js > 创建动态菜单或下拉列表的JavaScript代码

创建动态菜单或下拉列表的JavaScript代码

php中世界最好的语言
Lepaskan: 2018-03-16 16:42:29
asal
2153 orang telah melayarinya

这次给大家带来创建动态菜单或下拉列表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;;
}
Salin selepas log masuk

使用方法:

// 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;]
);
Salin selepas log masuk

以上只是那些实用JavaScript代码段中的一小部分,建议平时注意收集或自己编写这样的基础代码段,它们能在很多项目中使用或通过一些改造提供更完善的功能,使用这些代码段将为你节省下大量的开发时间。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

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

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

Atas ialah kandungan terperinci 创建动态菜单或下拉列表的JavaScript代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan