如何根据先前表单字段的选定选项值隐藏表单字段

Posted

技术标签:

【中文标题】如何根据先前表单字段的选定选项值隐藏表单字段【英文标题】:How to hide a form field based on the previously form field's selected option value 【发布时间】:2019-08-24 06:17:53 【问题描述】:

如果用户在之前的表单域(“operacao”)具有的六个选项中选择了一些(“Conta”或“Retirada”),我想隐藏一个表单域(“metodo”)。

我尝试根据“operacao”表单字段的选定选项的值 (.val()) 使用 .change() 函数隐藏 (.hide()) “metodo”表单字段。

<form method=post>
     form.csrf_token 
    <label for="operador">Operador</label>
     render_field(form.operador) 
    <br  />
    <label for="operacao">Operação</label>
    <select class="form-control" id="operacao" name="operacao" required="">
        <option value="Foto Documento">Foto Documento</option>
        <option value="Revelação">Revelação</option>
        <option value="Foto Produto">Foto Produto</option>
        <option value="Ótica">Ótica</option>
        <option value="Conta">Conta</option>
        <option value="Retirada">Retirada</option>
    </select>       
    <br/>
    <label for="metodo">Método de Pagamento</label>
    <select class="form-control" id="metodo" name="metodo" required="">
        <option value="Não se aplica">Não se aplica</option>
        <option value="Dinheiro">Dinheiro</option>
        <option value="Cartão">Cartão</option>
    </select>
    <br />
    <label for="valor">Valor</label>
     render_field(form.valor) 
    <br />
    <label for="observacao">Observação*</label>
     render_field(form.observacao) 
    <small id="observacaoHelp" class="form-text text-muted">*Opcional</small>
    <br />
    <button type="submit" class="btn btn-outline-success">Salvar</button>
</form>

<!--I have typed the output of the render_field(form.operacao) and 
render_field(form.metodo) to make it easier to visualize. -->

<script>
$(document).ready(function() 
$("#operacao").change(function() 
    if ($(this).val() == "Conta" || "Retirada")
        $("#metodo").hide();
    );
);
</script>

由于“operacao”表单字段中的选项“Conta”和“Retirada”使表单字段“metodo”毫无目的(如果在“metodo”中选择了“Não se aplica”以外的其他选项,实际上可能会出现问题表单域)我希望它完全隐藏(“Não se aplica”选项已经是该表单域的默认选项,因此隐藏它没有问题)。 但是,选择这些选项并没有按预期隐藏该字段。

【问题讨论】:

【参考方案1】:

我相信你的问题是 jQuery 条件。

$(function()
  $("#operacao").change(function() 
    if ($(this).val() == "Conta" || $(this).val() == "Retirada") 
      $("#metodo").hide();
    
  );
);

【讨论】:

以上是关于如何根据先前表单字段的选定选项值隐藏表单字段的主要内容,如果未能解决你的问题,请参考以下文章

根据先前在同一表单上输入的值自动完成表单字段

如何根据两个是/否单选选项将值传递给隐藏字段

如何根据下拉列表中的选定数字生成表单输入字段(选择)

根据下拉列表中的选定值显示表单字段Angular TypeScript

已解决:如何在 Django 中的表单错误中重新显示带有选定值的表单集和 Select2 字段

仅从选定的单选按钮选项提交表单数据