<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="btn-group custom-drop">
<button type="button" class="btn btn-order-by-filt" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">Gelişmiş Sıralama <i class="ti-angle-down"></i>
</button>
<div class="dropdown-menu pull-right animated flipInX">
<a href="#" class="fiyatyuk pr">Fiyata Göre Yüksek</a>
<a href="#" class="fiyatdus pr">Fiyata Göre Düşük</a>
<a href="#" class="enson pr">En Son Eklenen</a>
</div>
</div>
<form action="" method="POST" id="OrderSubmit" style="max-width: 0;overflow: hidden;opacity: 0;">
<select name="son" class="sirala" onchange="$('#OrderSubmit').submit();">
<option value="">Gelişmiş Sıralama</option>
<option value="fiyatyuk" <?=($deg=='fiyatyuk' ) ? "selected" : '' ;?>>Fiyata Göre Yüksek</option>
<option value="fiyatdus" <?=($deg=='fiyatdus' ) ? "selected" : '' ;?>>Fiyata Göre Düşük</option>
<option value="enson" <?=($deg=='enson' ) ? "selected" : '' ;?>>En Son Eklenen</option>
</select>
<button type="submit" class="go-sbm"></button>
</form>
<script>
document.querySelectorAll('.pr').forEach(el => {
el.addEventListener('click', (e) => {
e.preventDefault()
document.querySelectorAll('.sirala option').forEach(k => {
if (el.classList.contains(k.value)) {
console.log(el)
console.log(k)
document.querySelector('.sirala').value = k.value
document.querySelector('.go-sbm').click()
}
});
})
});
</script>
</body>
</html>
Hocam aşağıdaki kod yapısına uyarlamak istiyorum
<div class="btn-group custom-drop">
<button type="button" class="btn btn-order-by-filt" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">Gelişmiş Sıralama <i class="ti-angle-down"></i>
</button>
<div class="dropdown-menu pull-right animated flipInX">
<a href="#">Fiyata Göre Yüksek</a>
<a href="#">Fiyata Göre Düşük</a>
<a href="#">En Son Eklenen</a>
</div>
</div>