javascript - Symfony 4 - 如何使用 Javascript 删除 Twig 上的选择？

Question

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

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

在我的 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>

使用 onChange 函数显示或不显示某些元素。 当我选择“Du xx au xx”时，我希望我的“momentDebut”显示除“day”之外的所有选择。

编辑:

我的 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:源代码中我的 (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

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

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 的情况下提交任何值。您可以找到several questions about this .