none
onchange No MVC RRS feed

  • Pergunta

  • 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á.
    • Editado developer033 quinta-feira, 21 de maio de 2015 14:57
    quinta-feira, 21 de maio de 2015 14:56

Respostas

  • 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>

    • Marcado como Resposta developer033 sábado, 23 de maio de 2015 15:23
    quinta-feira, 21 de maio de 2015 17:07

Todas as Respostas

  • 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>

    • Marcado como Resposta developer033 sábado, 23 de maio de 2015 15:23
    quinta-feira, 21 de maio de 2015 17:07
  • 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.

    quinta-feira, 21 de maio de 2015 20:33

  • 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.
    sexta-feira, 22 de maio de 2015 02:31
  • 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);



    sábado, 23 de maio de 2015 14:29
  • 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.

    sábado, 23 de maio de 2015 15:22