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

Posted 2023-05-09

【中文标题】如何根据先前表单字段的选定选项值隐藏表单字段

【英文标题】：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();
    
  );
);