1

Boa tarde, galera! To tentando esconder uma DIV no meu código com base no valor que um campo no meu site retorna. Se o valor dele estiver contido "Acidente", a DivAcidente deve ser mostrada. Caso retorne qualquer outro valor, ela continua oculta.

Tentei fazer isso com JavaScript, mas o script só entra em execução quando eu faço alguma alteração nesse DropDown, sendo que por padrão ele já vem carregado. Vou deixar a parte em específico do código, e o meu JS.

@* Script para controle dos campos de um RTA tipo Acidente *@
<script type="text/javascript">
    $(document).ready(function () {
        ////Chama o evento após selecionar um valor
        $('#OrigemAnomalia').on('change', function () {
            if (this.value == 'Acidente') {
                $(".DivAcidente").show();
            }
            else {
                $(".DivAcidente").hide();
            }
        });
    });
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">

        <div class="DivAcidente" style="display:none;">
            @Html.LabelFor(model => model.HoraOcorrencia, htmlAttributes: new { @class = "control-label col-md-2", style = "font-size: 14px" })
            <div class="col-md-3">
                @Html.EditorFor(model => model.HoraOcorrencia, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly" } })
                @Html.ValidationMessageFor(model => model.HoraOcorrencia, "", new { @class = "text-danger" })
            </div>
        </div>

        @Html.LabelFor(model => model.OrigemAnomalia, htmlAttributes: new { @class = "control-label col-md-2", style = "font-size: 14px" })
        <div class="col-md-3">
            @Html.DropDownListFor(model => model.OrigemAnomalia, listOrigem, new { @class = "form-control" })
            @*@Html.EditorFor(model => model.OrigemAnomalia, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly" } })*@
            @Html.ValidationMessageFor(model => model.OrigemAnomalia, "", new { @class = "text-danger" })
        </div>

    </div>

4 Respostas 4

0

Tens de atribuir o id a esse dropdown, assim:

@Html.DropDownListFor(model => model.OrigemAnomalia, listOrigem, new { @id="OrigemAnomalia", @class = "form-control" })
2
  • Continua sem efeito. Aparentemente o ID ja é atribuido com o nome da model, já que esse mesmo script funciona em outra página que o usuário precisa selecionar a opção. Commented 17/06/2019 às 17:47
  • Qual o valor por defeito? Pode variar? Se for sempre o mesmo porque não mostrar também por defeito a div respetiva e só ocultar caso a dropdown altere?
    – iamdlm
    Commented 18/06/2019 às 9:08
0

Tente chamar a função do evento quando carrega.

<script type="text/javascript">
    $(document).ready(function () {

        var toogleDivAcidente = function () {
            if (this.value == 'Acidente') {
                $(".DivAcidente").show();
            }
            else {
                $(".DivAcidente").hide();
            }
        };

        $('#OrigemAnomalia').on('change', toogleDivAcidente);

        toogleDivAcidente();

    });
</script>
1
  • Continua sem resultados. Eu tenho que mexer no dropdown e selecionar "Acidente" novamente para a Div aparecer Commented 17/06/2019 às 17:50
0

O ideal nesse caso é printar style="display:none" antes de renderizar o html com a linguagem de programação que você está usando de acordo com o valor do model e utilizar seu script js somente para futuras alterações no campo no lado cliente.

Mas se você desejar fazer somente com javascript, basta disparar o evento change logo após a declaração do listener no campo (e você pode fazer isso com encadeamento).

Veja o exemplo abaixo:

 jQuery(document).ready(function ($) {
    ////Chama o evento após selecionar um valor
    $('#OrigemAnomalia').on('change', function () {
        if (this.value == 'Acidente') {
            $(".DivAcidente").show();
        }
        else {
            $(".DivAcidente").hide();
        }
    }).trigger('change'); // <-- dispara o evento change no campo
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="form-group">
  <div class="DivAcidente" style="display:none;">
	Conteudo da div aqui
  </div>
</div>

<div class="col-md-3">
	<select class="form-control" id="OrigemAnomalia">
		<option value="Acidente" selected="selected">Acidente</option>
		<option value="Valor1">Outra Origem</option>
		<option value="Valor2">Qualquer Valor</option>
	</select>
</div>

Referência

0

Você pode chamar o .change() após o .on():

$(function(){
   $('#OrigemAnomalia').on('change', function(){
      $(".DivAcidente")[this.value == 'Acidente' ? 'show':'hide']();
   }).change();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="DivAcidente">
   DivAcidente
</div>
<select id="OrigemAnomalia">
   <option value="Acidente">Acidente</option>
   <option value="2" selected>opção 2</option>
   <option value="3">opção 3</option>
</select>

O .change() irá disparar o evento change no .on() assim que o DOM for carregado. No exemplo acima simplifiquei a alternância dos métodos .show() e .hide() usando um operador ternário para evitar repetição de código.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .