並び替えドロップダウン

<div class="d11-05-03-wrap">
          <div class="d11-05-03-bar">
            <span class="d11-05-03-count">全6件</span>
            <select class="d11-05-03-sort" id="d483Sort">
              <option value="rec">おすすめ順</option>
              <option value="new">新着順</option>
              <option value="low">価格が安い順</option>
              <option value="high">価格が高い順</option>
            </select>
          </div>
          <ul class="d11-05-03-list" id="d483List">
            <li data-new="3" data-price="4200">商品A<span>&yen;4,200</span></li>
            <li data-new="1" data-price="1800">商品B<span>&yen;1,800</span></li>
            <li data-new="5" data-price="6900">商品C<span>&yen;6,900</span></li>
            <li data-new="2" data-price="2900">商品D<span>&yen;2,900</span></li>
          </ul>
        </div>

.prev.d11-05-03{align-items:flex-start;justify-content:flex-start}
        .d11-05-03-wrap{width:100%}
        .d11-05-03-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
        .d11-05-03-count{font-size:12px;color:#6b7280}
        .d11-05-03-sort{font-size:12px;border:1px solid #d1d5db;border-radius:8px;padding:5px 8px;color:#374151;background:#fff}
        .d11-05-03-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
        .d11-05-03-list li{display:flex;justify-content:space-between;font-size:13px;color:#1f2937;background:#f8f9fb;border-radius:8px;padding:9px 12px;transition:transform .3s,opacity .3s}
        .d11-05-03-list li span{font-weight:700;color:#4f46e5}

(function(){
        var root=document.getElementById('item-11-05-03');
        var sel=root.querySelector('#d483Sort');
        var list=root.querySelector('#d483List');
        sel.addEventListener('change',function(){
          var items=Array.prototype.slice.call(list.children);
          var v=sel.value;
          items.sort(function(a,b){
            if(v==='new')return b.dataset.new-a.dataset.new;
            if(v==='low')return a.dataset.price-b.dataset.price;
            if(v==='high')return b.dataset.price-a.dataset.price;
            return 0;
          });
          items.forEach(function(li){list.appendChild(li);});
        });
      })();