Question: I thought that adding a `"value"` attribute set on the `<select>` element below would cause the `<option>` containing my provided `"value"` to be selected by default:

```html
<select name="hall" id="hall" value="3">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
```

However, this did not work as I had expected. How can I set which `<option>` element is selected by default?

Answer: 
Another example; using JavaScript to set a selected option. 

*(You could use this example to for loop an array of values into a drop down component)*

`<select id="yourDropDownElementId"><select/>`

```
// Get the select element
var select = document.getElementById("yourDropDownElementId");
// Create a new option element
var el = document.createElement("option");
// Add our value to the option
el.textContent = "Example Value";
el.value = "Example Value";
// Set the option to selected
el.selected = true;
// Add the new option element to the select element
select.appendChild(el);

```
This example has been tested to work with multiple `<select>` elements on the page, and can also work with normal text elements. It has not been tested for setting the value to more than one selection when `<select multiple="true">`, however you can probably modify this sample to support that.

* Add an attribute `data-selected` to each `<select>` element and set the value(s) to the value of the option you wish to have selected.
* Use javascript's `querySelectorAll()` to select all elements that have the custom attribute you just added.

In the following example, when run, the first `<select>` should show option with the value `user` as selected, and the second `<select>` should show the option with the value `admin` as selected.

```js
document.querySelectorAll('[data-selected]').forEach(e => {
   e.value = e.dataset.selected
});
```

```html
<select data-selected="user" class="form-control" name="role">
    <option value="public">
        Pubblica
    </option>
    <option value="user">
        Utenti
    </option>
    <option value="admin">
        Admin
    </option>
</select>

<select data-selected="admin" class="form-control" name="role2">
    <option value="public">
        Pubblica
    </option>
    <option value="user">
        Utenti
    </option>
    <option value="admin">
        Admin
    </option>
</select>
```