There is an automatically generated list with the selected attribute already set, this code is generated by default for visitors:

<select id="size"> <option value="10">10</option> <option selected="selected" value="20">20</option> <option value="30">30</option> </select>

It is necessary to rearrange the attribute "selected" from the second point to any other (say, 3) when loading the page.
The jQuery library is not available for work.

  • Completed the answer. - Vadim Ovchinnikov

4 answers 4

Just setting the value to select

To set the select option, use the value property:

 document.querySelector("#size").value = "30"; 
 <select id="size"> <option value="10">10</option> <option selected="selected" value="20">20</option> <option value="30">30</option> </select>

DOM Modification

If you just need to modify the DOM and set the selected necessary option, then for this you can use the following code:

 document.querySelector("#size > option[selected]").removeAttribute("selected"); document.querySelector("#size > option[value='30']").setAttribute("selected", "selected"); 
 <select id="size"> <option value="10">10</option> <option selected="selected" value="20">20</option> <option value="30">30</option> </select>

  • Thank you, the code works, in part of the DOM modification, however, the value value is not passed to the form = (for some reason I was sure that the modification when loading this parameter will be similar to the "manual" activation by the user ... tried to modify a little: document.querySelector("#size > option[value='30']").click(); ;. but does not work ... - ttyd0

 window.addEventListener('load', function() { document.getElementById('size').querySelectorAll('option')[2].selected = true; }); 
 <select id="size"> <option value="10">10</option> <option selected="selected" value="20">20</option> <option value="30">30</option> </select> 

     window.onload = function() { document.getElementById('size').value = '30' } 
     <select id="size"> <option value="10">10</option> <option selected="selected" value="20">20</option> <option value="30">30</option> </select> 

       function setSelect(newSelectNum) { var select = document.getElementById('size'); var options = select.getElementsByTagName('option'); // сбрасываем старый for (var i = 0, l = options.length; i < l; i++) { var option = options[i]; if (option.getAttribute('selected') === 'selected') { option.removeAttribute('selected'); } } // устанавливаем новый options[newSelectNum].setAttribute('selected', 'selected'); }
      • Too big code for such a simple task. The cycle can be generally useless. It changes the selected option "selected"="selected" to the empty attribute "selected" . - Vadim Ovchinnikov
      • @VadimOvchinnikov, yes, I agree, but as an example) - Sublihim