How to change the order of select options?-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

It works here but when I try to adat to my enviroment I've noterd that [ is opened but never closed; If I use a javascript version a little old it dosn't work;

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>