change selected option of a select using js

Question

I'm trying to select the 2nd option by default using javascript. The HTML is generated by another library so I don't have control of it.

The input look like this.

HTML code

As you can see, select does'nt have a class so I need to access to it by the div such as

document.querySelector(".rule--field > select")

but I don't know exactly how is it.

Answer 1

Using JS, this can be done by changing the select element's value.

var select = document.querySelector('.rule--field > select');
select.value = "facebook";

<div class="rule--field">
    <select>
        <option value="twitter">twitter</option>
        <option value="facebook" selected>facebook</option>
        <option value="linkedin" selected>linkedin</option>
    </select>
</div>