Question

如果用户选择先前表单字段（“ 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ãose aplica”以外的其他选项，则可能会出现问题）表单字段）我希望它完全隐藏（该表单字段上的默认选项“Nãose aplica”已经是默认设置，因此隐藏它没有问题）。但是，选择这些选项并不能像预期的那样隐藏该字段。

Answer 1

我相信您的问题与jQuery条件有关。

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

如何根据以前的表单字段的所选选项值隐藏表单字段

1 个答案: