동적 메뉴 또는 드롭다운 목록을 생성하는 JavaScript 코드

이번에는 동적 메뉴 또는 드롭다운 목록을 만드는 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(
  ['January:JAN', 'February:FEB', 'March:MAR'], // item:value
  ['select', 'option']
); 
// List of groceriesmakeMenu(
  ['Carrots', 'Lettuce', 'Tomatos', 'Milk'],
  ['ol', 'li']
);

위 내용은 실용적인 JavaScript 코드 조각 중 일부에 불과합니다. 이러한 기본 코드 조각은 직접 수집하거나 작성하는 것이 좋습니다. 일부 수정 기능을 사용하면 이러한 코드 조각을 사용하여 개발 시간을 많이 절약할 수 있습니다.

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트기타 관련 기사를 주목하세요!

추천 자료:

날짜가 유효한지 확인하는 JavaScript 코드 조각

JavaScript 코드 요소 그룹의 최대 너비 또는 높이 가져오기

위 내용은 동적 메뉴 또는 드롭다운 목록을 생성하는 JavaScript 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!