Pblm pour créer un select en JS

Bonjour,

Voila je rencontre un petit problème avec mon code. J'essais de créer une liste déroulante qui fonctionne en JS mais j'ai un problème lorsque que j'en mets plusieurs, il me faut définir sur laquelle je travail et la seule solution que j'ai trouver pour le moment est de lui ajouter un eventListener, mais problème, je ne sais pas lequel utilisé pour que les infos s'affiche au chargement des éléments !

Ce que je fais

Codepen : https://codepen.io/gnomes/pen/jyqrqV

HMTL

<div class="s-nav"><div class="s-box select">
        <span class="s-choice" data-select="nb_result" data-default="Nombre de résultat par page"><o>{{data-sort}}</o><i class="i-ico right material-icons">&#xE5C5;</i></span> <!-- Devient ouvert : &#xE5C7; et ferme : &#xE5C5; -->
            <ul class="s-list inactive" data-list="nb_result">
                <li class="s-list__item choice" data-sort="sort-az">20 par page</li>
                <li class="s-list__item" data-sort="sort-za">50 par page</li>
                <li class="s-list__item" data-sort="sort-za">100 par page</li>
                <li class="s-list__item" data-sort="sort-za">200 par page</li>
            </ul>
        </div><!--
        --><div class="s-box">
            <span class="s-visual active"><i class="s-ico material-icons">&#xE8F0;</i> Mosaïque</span>
        </div><!--
        --><div class="s-box">
            <span class="s-visual"><i class="s-ico material-icons">&#xE8EF;</i> Liste</span>
        </div><!--
        --><div class="s-box select">
        <span class="s-choice" data-select="sort" data-default="Trier par pertinence"><o>{{data-sort}}</o><i class="i-ico right material-icons">&#xE5C5;</i></span> <!-- Devient ouvert : &#xE5C7; et ferme : &#xE5C5; -->
            <ul class="s-list inactive" data-list="sort">
                <li class="s-list__item" data-sort="sort-az">Titre A-Z</li>
                <li class="s-list__item choice" data-sort="sort-za">Titre Z-A</li>
                <li class="s-list__item" data-sort="sort-news">Nouveautés</li>
                <li class="s-list__item" data-sort="sort-teamchoice">Choix de l'équipe</li>
                <li class="s-list__item" data-sort="sort-author">Trier par auteur</li>
                <li class="s-list__item" data-sort="sort-editor">Trier par éditeur</li>
                <li class="s-list__item" data-sort="sort-category">Trier par catégorie</li>
            </ul>
        </div>
    </div>

JS

var s_choice_S = document.querySelectorAll('span.s-choice')
var body = document.querySelector('body')

for(var i = 0; i < s_choice_S.length; i++) {
    var s_choice = s_choice_S[i]

    s_choice.addEventListener('click', function (e) {
        var parent = this.parentNode
        var choiceElmt = parent.querySelector('o')
        var list = parent.querySelector('ul.s-list')
        var choices_S = list.querySelector('li.s-list__item')

        var choiceTxt = choiceElmt.textContent
        var choiceAct = list.querySelector('li.choice')

        var name_attr = 'data-default'
        var attr = this.getAttributeNode(name_attr)
        var defaultTxt = attr.nodeValue

        if(choiceAct != null) {
            var choiceActTxt = choiceAct.textContent
            choiceElmt.innerText = choiceActTxt
        } else {
            choiceElmt.innerText = defaultTxt
        }
    })
}

Ce que j'aimerais

J'aimerais que lorsque la page se charge, la valeur de mes <span> change et PAS lorsque je clique dessus !

Merci d'avance !