How to change the current selected option in the by JS Asked Feb 01 '18 at 23:52 Active Feb 02 '18 at 02:52 Viewed 2,191 times 1 0 I try a several ways to make it, but only what I got - two selected items in one time. Also I found on SOF a "solution" - document.getElementById("selection-type").selectedIndex = 2; , but it does not work. I understand that this is a very simple question, but I really do not know what is I'am missed. var select = document.body.querySelector('select'); for (var i = 0; i < select.options.length; i++) { if (select.options[i].selected) { } } select.options[1].selected = false; var newOption = new Option('Classic', 'Classic'); select.append(newOption); select.options[2].selected = true; <select> <option value="Rock">Storm</option> <option value="Blues" selected>Rain</option> </select> javascript html edited Feb 02 '18 at 00:01 Sviat Kuzhelev asked Feb 01 '18 at 23:52 Sviat Kuzhelev 1,758 10 28 1 Your snippet appears to work perfectly – Sterling Archer Feb 01 '18 at 23:55 @SterlingArcher no-no-no. If you debug the code after start - you will see next ` Storm Rain Classic` - still selected [1].element – Sviat Kuzhelev Feb 02 '18 at 00:00

Answer 1

You are confusing attributes and properties. Changing a property is a dynamic action that affects the in-memory object, it doesn't modify the static HTML that the element was originally parsed with. If you want to change the attribute, you need to use setAttribute() or removeAttribute().

var select = document.body.querySelector('select');

// Get the element with the "selected" attribute
console.log("Element with 'selected' HTML attribute: " + 
   select.querySelector("[selected]").getAttribute("value"));

// Get the element with the "selected" value:
console.log("Element with value property of 'selected': " + select.value);

// Change the value property of the select
console.log("Changing value of select element to 'Rock'");
select.value = "Rock";

// Get the element with the "selected" attribute
console.log("Element with 'selected' HTML attribute: " + 
   select.querySelector("[selected]").getAttribute("value"));  // Still Blues!

// Get the element with the "selected" value:
console.log("But, value of the select element is now: " + select.value);  // Now Rock!

// Change which element has the selected attribute
console.log("Switching elment that has the 'selected' attribute...");
select.querySelector("[selected]").removeAttribute("selected");
select.querySelector("[value=Rock]").setAttribute("selected", "selected");

console.log("Element with 'selected' HTML attribute: " + 
  select.querySelector("[selected]").getAttribute("value"));
  
console.log(select.options[0])
console.log(select.options[1]);

<select>
  <option value="Rock">Storm</option>
  <option value="Blues" selected>Rain</option>
</select>

Answer 2

To answer the question in the title, all you need to do is set the desired option as selected. To get current <select> value one should look into the select.value:

let select = document.body.querySelector('select'),
  newOption = new Option('Classic', 'Classic');

select.append(newOption);

select.options[2].selected = true;

console.log(select.value);
// Classic

<select>
  <option value="Rock">Storm</option>
  <option value="Blues" selected>Rain</option>
</select>

Also note selected attribute only marks default selection, and is different than the selected property of the <option>. The attribute simply tells the browser if it should render the option as selected when initially drawing the DOM element or not.

---

When dealing with <select multiple>, you need to check the .selectedOptions property of the <select> and map it to an array. Example:

let select = document.body.querySelector('select'),
  newOption = new Option('Classic', 'Classic');

select.append(newOption);

select.options[2].selected = true;

let values = [].slice.call(select.selectedOptions).map(a => a.value);
console.log(values)


// ["Blues","Classic"]

<select multiple>
  <option value="Rock">Storm</option>
  <option value="Blues" selected>Rain</option>
</select>

The .selectedOptions is an object which contains the selected options, the length and native methods, such as item() and namedItem(). Do note option groups are not contained.