How disable option with javascript?

Question

in my project :

If I choose "Heures supp", I would like that in my second select/option, the "Du xx au xx" option is disable, and the "La journée" option is selected.

With my actual code :

var valeur = select.options[select.selectedIndex].value;

I can determine my first selected option. And I want in a if condition, test it, to disable "Du xx au xx" option if my first selected option is "Heure supp".

<select class="browser-default custom-select" name="choiceUser" id="choiceUser" onchange="choiceDay2(this)">
    <option value="" disabled="" selected="">Choisissez la durée de l'absence</option>
    <option value="jour">La journée</option>
    <option value="periode">Du xx au xx</option>
</select>

I tried this but doesn't work, I'm not good in Javascript :

if (valeur == "Heures supp") {
        choiceDay = document.querySelector('[name="choiceUser"][option="periode"]');
        choiceDay.setAttribute('disabled', true);
}

EDIT:

I resolved the first problem : disable "periode" option :

choiceDay = document.querySelector('[name="choiceUser"]');
                periode = choiceDay.querySelector('option[value="periode"]');
                periode.setAttribute('disabled', true);

Now, I have to select the "Du xx au xx" option

Answer 1

I resolved the problem :

Just make this :

var valeur = select.options[select.selectedIndex].value;
console.log(valeur);
if (valeur == "Heures supp") {
  choiceDay = document.querySelector('[name="choiceUser"]');
  periode = choiceDay.querySelector('option[value="periode"]');
  periode.setAttribute('disabled', true);

  journee = choiceDay.querySelector('option[value="jour"]');
  journee.setAttribute('selected', true);
  console.log(choiceDay);
}

Now, if in the first list, I select "Heure supp", then in the second list, the option "Du xx au xx" will be disabled. And by default, the option "journee" will be activated!

Thank you all!