Necesito poner el valor que el usuario selecciona en la parte superior de la selección.
Lo que quiero es que cuando la selección se cambie a "África", la lista que se muestra en el navegador será:
Africa India US UKCuando cambie a EE. UU., quiero que la lista se vea así:
US Africa India UK function myfunction() { var intCountry = '4'; var objSelect = document.getElementById('Genre'); var objInitialNode = objSelect.options[0]; console.log(objSelect.length); //loop through options in select for (var j = 0; j < objSelect.length; j++) { console.log('J::' + j); if (objSelect.options[j].value == intCountry) { console.log(objSelect.options[j].value); objSelect.insertBefore(objSelect.options[j], objInitialNode.nextSibling); console.log('ssss'); break; } } } <select id="Genre" onchange="myfunction()"> <option value="1">India</option> <option value="2">US</option> <option value="3">UK</option> <option value="4">Africa</option> </select>Por aquí :
const objSelect = document.getElementById('Genre') objSelect.onchange =_=> { let optSelected = objSelect.querySelector(`option[value="${objSelect.value}"]`) , optFirst = objSelect.querySelector(`option`) ; objSelect.insertBefore( optSelected, optFirst ) } <select id="Genre"> <option value="1">India</option> <option value="2">US</option> <option value="3">UK</option> <option value="4">Africa</option> </select>también puedes hacer
function myfunction( el ) { let optSelected = el.querySelector(`option[value="${el.value}"]`) , optFirst = el.querySelector(`option`) ; el.insertBefore( optSelected, optFirst ) } <select onchange="myfunction(this)"> <option value="1">India</option> <option value="2">US</option> <option value="3">UK</option> <option value="4">Africa</option> </select>Hay una solución más simple que las proporcionadas en las respuestas anteriores.
const obj = document.querySelector('#genre') obj.onchange = _=> { obj.insertBefore(obj.options[obj.selectedIndex], obj[0]) }; <select id="genre"> <option value="1">India</option> <option value="2">US</option> <option value="3">UK</option> <option value="4">Africa</option> </select>