I need to put the value the user selects to the top of the select.
What I want is when the select is changed to "Africa", the list displayed on browser will be:
Africa
India
US
UK
When change to US I want the list to look like:
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>this way :
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> you can also do
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> There is a simpler solution than the ones provided in the previous answers.
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>