Symfony 4 - 如何使用 Javascript 删除树枝上的选择？

Question

我的表单有一个 symfony 4 项目。在我的 formType 中，我有一个像 :

这样的 choiceType

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

在我的树枝上，我有一个 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>

具有显示或不显示某些元素的onChange 函数。当我 select "Du xx au xx" 时，我希望我的 'momentDebut' 显示除 'day'.

之外的所有选项

编辑：

我的树枝：

//...
<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：我的 (matin,après-midi,journée) HTML 在源代码中：

<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>

我这样更新了我的代码：

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;
            }
        }

而且看起来很有效！问题出在这一行：

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

我换成了

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

现在，一切都很好！

感谢您的帮助！！

Answer 1

虽然不是完全删除 option 正如你所问，一种可能的解决方案是禁用它，防止被选中，这更容易一些。

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>

无论您最终如何做，您都应该在 php 中添加一些验证，因为您可以在禁用 javascript 的情况下提交任何值。你可以找到 questions about this.

Symfony 4 - 如何使用 Javascript 删除树枝上的选择？

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

javascript

php

symfony

select

choice