Symfony 4 - How to remove choice on twig with Javascript?

Question

I've a symfony 4 project with my form. In my formType, I've a choiceType like :

->add('momentDebut', ChoiceType::class, [
                'choices' => [
                    "matin" => "matin",
                    "après-midi" => "après-midi",
                    "journée" => "journée"
                ],

In my twig, I have a select :

<select class="browser-default custom-select" id="choiceUser" onchange="choiceDay(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>

with onChange function which display or not some elements. When I select "Du xx au xx", I would like my 'momentDebut'show all the choices except 'day'.

EDIT:

My Twig :

//...
<select class="browser-default custom-select" id="choiceUser" onchange="choiceDay(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>
//...
<div id="momentDebut">
    <div class="row">
        <div class="col">
            {{form_row(form.dateDebut)}}
        </div>
        <div class="col">
            {{form_row(form.momentDebut)}}
        </div>
    </div>
</div>
//...

EDIT2 : My (matin,après-midi,journée) HTML in the source-code:

<div id="absence_momentDebut">
    <div class="form-check">
        <input type="radio" id="absence_momentDebut_0" name="absence[momentDebut]" required="required" class="form-check-input" value="matin">
        <label class="form-check-label required" for="absence_momentDebut_0">matin</label>
    </div>
    <div class="form-check">
        <input type="radio" id="absence_momentDebut_1" name="absence[momentDebut]" required="required" class="form-check-input" value="après-midi">
        <label class="form-check-label required" for="absence_momentDebut_1">après-midi</label>
    </div>
    <div class="form-check">
        <input type="radio" id="absence_momentDebut_2" name="absence[momentDebut]" required="required" class="form-check-input" value="journée">
        <label class="form-check-label required" for="absence_momentDebut_2">journée</label>
    </div>
</div>

I updated my code like this :

function choiceDay(select) {
            var valeur = select.options[select.selectedIndex].value;
            var targetSelect = document.querySelector('[name="absence[momentDebut]"]');
            var targetOption = document.querySelector('[name="absence[momentDebut]"][value="journée"]');
            console.log(targetSelect.value);
            console.log(targetOption);


            // var choice = $('#choiceMomentDebut').text();
            // console.log(choice);

            switch (valeur) {
                case "periode":
                    document.getElementById("absence").style.visibility = "visible";
                    document.getElementById("momentDebut").style.visibility = "visible";
                    document.getElementById("momentFin").style.visibility = "visible";

                    if (targetOption.value == "journée") { // Reset the selection to the default if it's currently selected
                        targetSelect.selectedIndex = 0;
                    }
                    // Disable the selection
                    targetOption.setAttribute('disabled', true);

                    break;

                case "jour":
                    document.getElementById("absence").style.visibility = "visible";
                    document.getElementById("momentDebut").style.visibility = "visible";
                    document.getElementById("momentFin").style.visibility = "hidden";
                    targetOption.removeAttribute('disabled');
                    break;

                default:
                    break;
            }
        }

And it seems work ! The problem was about this line :

targetOption = targetSelect.querySelector('option[value="journée"]');

I replaced it by

var targetOption = document.querySelector('[name="absence[momentDebut]"][value="journée"]');

And now, all is good !

Thanks for your help !!

Answer 1

Although is not exactly removing the option as you ask one possible solution is to just disable it, preventing from being selected, which is a little easier.

 function choiceDay(el) { targetRadio = document.querySelector('[name="absence[momentDebut]"]:checked'); targetOption = document.querySelector('[name="absence[momentDebut]"][value="journée"]'); if (el.value == "periode") { if (targetOption == targetRadio) { // Uncheck if it's currently selected targetOption.checked = false; } // Disable the selection targetOption.setAttribute('disabled', true); } else { targetOption.removeAttribute('disabled'); } } 

 <select class="browser-default custom-select" id="choiceUser" onchange="choiceDay(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> <div id="absence_momentDebut"> <div class="form-check"> <input type="radio" id="absence_momentDebut_0" name="absence[momentDebut]" required="required" class="form-check-input" value="matin"> <label class="form-check-label required" for="absence_momentDebut_0">matin</label> </div> <div class="form-check"> <input type="radio" id="absence_momentDebut_1" name="absence[momentDebut]" required="required" class="form-check-input" value="après-midi"> <label class="form-check-label required" for="absence_momentDebut_1">après-midi</label> </div> <div class="form-check"> <input type="radio" id="absence_momentDebut_2" name="absence[momentDebut]" required="required" class="form-check-input" value="journée"> <label class="form-check-label required" for="absence_momentDebut_2">journée</label> </div> </div> 

However you end up doing it, you should add some validation in php, since you could submit any value with javascript disabled. You can find several questions about this .