Usuário com melhor resposta
onchange No MVC

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
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
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
-
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. -
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. -
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);
- Editado Claudinei Nascimento sábado, 23 de maio de 2015 14:36
-
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.
- Editado developer033 sábado, 23 de maio de 2015 15:59