onchange No MVC

Question

Bom dia,

Tenho o seguinte DDL:

@Html.DropDownListFor(model => model.Type, ViewBag.Type as SelectList, "-- Select --", new { id = "ddlType", onchange = "onchange()" })

Baseado no item selecionado nesse DDL, dou um Hidden em outro DDL, ou seja, esse 2º DDL só será mostrado se uma opção específica do 1º DDL for marcada.

O 2º DDL é esse:

@Html.DropDownListFor(model => model.SimilarId, ViewBag.SimilarId as SelectList, "-- Select --", new { id = "ddlSimilarId" })

Tenho essa Bundle já referenciada na "Master Page" _Layout..

@Scripts.Render("~/bundles/jquery")

Código da minha View:

@section Scripts {       @Scripts.Render("~/bundles/jqueryval")    }

<script type="text/javascript">            $(function onchange() {                if (document.getElementById("ddlType").value == "Eletronic") {                document.getElementById("ddlSimilarId").disabled = "disabled";            }        });    </script>

Tentei assim também: 

<script type="text/javascript">                $(function () {                $("#ddlType").change(function () {                    if ($(this).val() == "Eletronic") {                        $("#ddlSimilar").disabled = "disabled";                    }                });        });    </script>

Nada acontece, em nenhum dos 2 scripts.

PS: Também queria fazer isso para um RadioButton..

Agradeço desde já.

Answer 1

Boa tarde,

Segue.

<script type="text/javascript">

function visibleHiddenDDL(valor){

      if(valor == 'Eletronic'){
         $('#divSimilar').show();
       }
	   else{
	     $('#divSimilar').hide();
	   }

}
<script> 


@Html.DropDownListFor(model => model.Type, ViewBag.Type as SelectList, "-- Select --", new { id = "ddlType", onchange = "visibleHiddenDDL($(this).val());" })

<div id="divSimilar" style="display: none;">
@Html.DropDownListFor(model => model.SimilarId, ViewBag.SimilarId as SelectList, "-- Select --", new { id = "ddlSimilarId" })
</div>

Answer 2

Putz, bem simples sua solução, porém, por algum motivo, não acontece nada, quando modifico no DDL (Type) o value para Eletronic, ou para qualquer outro. Segue meu código no momento:

<div class="editor-label">            @Html.LabelFor(model => model.Type)        </div>        <div class="editor-field">            @Html.DropDownListFor(model => model.Type, ViewBag.Type as SelectList, "-- Select --", new { id = "ddlType", onchange = "onchange($(this).val());" })                        @Html.ValidationMessageFor(model => model.Type)        </div>    <div id="divLblSimilar" class="editor-label" style="display:none">            @Html.LabelFor(model => model.SimilarId)        </div>        <div id="divDdlSimilar" class="editor-field" style="display:none">                       @Html.DropDownListFor(model => model.SimilarId, ViewBag.SimilarId as SelectList, "-- Select --")            @Html.ValidationMessageFor(model => model.SimilarId)        </div>@section Scripts {    @Scripts.Render("~/bundles/jqueryval")}<script type="text/javascript">    function onchange(valor) {        if (valor == "Eletronic") {            $("#divLblSimilar").show();            $("#divDdlSimilar").show();        }        else {            $("#divLblSimilar").hide();            $("#divDdlSimilar").hide();        }    }

O que pode ser? Já agradeço por tentar ajudar.

Answer 3

Tentei inspecionar o elemento e assim que mudo o Index do DDL, aparece a seguinte mensagem no Console da inspeção:

Uncaught RangeError: Maximum call stack size exceeded
Com vários dessa mensagem:

onchange

@

Create:71

Creio que o onchange esteja sendo chamado várias vezes, sem limite.

Answer 4

Para o evento funcionar basta trocar o nome do método.

Se quiser habilitar ou desabilitar o drop basta fazer isso:

Desabilita
$("#ddlSimilarId").prop('disabled', true);
Habilita
$("#ddlSimilarId").prop('disabled', false);

Answer 5

Na verdade, o problema era uma versão muito antiga do jQuery, agora estou usando a 1.10.2 e funcionou dessa forma:

 <script type="text/javascript">        var similar = $('#divSimilar');        $('#Type').change(function () {            $(this).val() == "Eletronic" ? similar.show() : similar.hide();        }); </script>

Obrigado a todos que ajudaram.