言語スイッチャードロップダウン

<div class="d03-04-01-wrap">
          <button class="d03-04-01-btn" type="button">
            <span class="d03-04-01-flag">JA</span> 日本語
            <svg class="d03-04-01-caret" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" stroke="currentColor" stroke-width="1.6" fill="none"/></svg>
          </button>
          <ul class="d03-04-01-list">
            <li data-label="日本語" data-flag="JA">日本語</li>
            <li data-label="English" data-flag="EN">English</li>
            <li data-label="中文" data-flag="ZH">中文</li>
            <li data-label="한국어" data-flag="KO">한국어</li>
          </ul>
        </div>

.d03-04-01-wrap{position:relative;width:180px;font-size:14px}
        .d03-04-01-btn{width:100%;display:flex;align-items:center;gap:8px;padding:10px 12px;
          border:1px solid #d1d5db;border-radius:8px;background:#fff;color:#1f2937;
          font-size:14px;font-weight:600;cursor:pointer}
        .d03-04-01-btn .d03-04-01-caret{margin-left:auto;transition:transform .2s ease}
        .d03-04-01-flag{display:inline-flex;align-items:center;justify-content:center;
          width:22px;height:16px;border-radius:2px;background:#4338ca;color:#fff;
          font-size:9px;font-weight:800}
        .d03-04-01-list{position:absolute;top:calc(100% + 6px);left:0;right:0;margin:0;padding:6px;
          list-style:none;background:#fff;border:1px solid #e5e7eb;border-radius:8px;
          box-shadow:0 10px 24px rgba(0,0,0,.12);
          opacity:0;visibility:hidden;transform:translateY(-6px);
          transition:opacity .18s ease,transform .18s ease,visibility .18s}
        .d03-04-01-wrap.is-open .d03-04-01-list{opacity:1;visibility:visible;transform:translateY(0)}
        .d03-04-01-wrap.is-open .d03-04-01-caret{transform:rotate(180deg)}
        .d03-04-01-list li{padding:8px 10px;border-radius:6px;cursor:pointer;color:#374151}
        .d03-04-01-list li:hover{background:#eef2ff;color:#4338ca}

(function(){
        var root=document.querySelector('#item-03-04-01 .d03-04-01');
        var wrap=root.querySelector('.d03-04-01-wrap');
        var btn=root.querySelector('.d03-04-01-btn');
        var flag=root.querySelector('.d03-04-01-flag');
        var label=btn.childNodes[1];
        root.querySelectorAll('.d03-04-01-list li').forEach(function(li){
          li.addEventListener('click',function(){
            flag.textContent=li.getAttribute('data-flag');
            label.textContent=' '+li.getAttribute('data-label')+' ';
            wrap.classList.remove('is-open');
          });
        });
        btn.addEventListener('click',function(e){
          e.stopPropagation();
          wrap.classList.toggle('is-open');
        });
        root.addEventListener('click',function(){wrap.classList.remove('is-open');});
      })();