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

debugcn 发表于 Dev

基埃加

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

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

在我的树枝中，我有一个选择：

<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”之外的所有选项。

编辑：

我的树枝：

//...
<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：源代码中我的（早上，下午，白天）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"]');

现在，一切都很好！

谢谢你的帮助！！

留言

虽然并没有完全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 的情况下提交任何值。您可以找到几个关于此的问题。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。