Error trying to capture the value of an @ Html.DropDownList

0

I have a form and I show a @ Html.DropDownList, the data that I am passing was passed through a ViewBag which instantiated at the beginning of the view, when trying to get the value the jquery generates the following error

Uncaught Error: Syntax error, unrecognized expression: #
at Function.Sizzle.error (jquery.js:1580)
at Sizzle.tokenize (jquery.js:2232)
at Sizzle.select (jquery.js:2659)
at Function.Sizzle [as find] (jquery.js:884)
at jQuery.fn.init.find (jquery.js:2922)
at new jQuery.fn.init (jquery.js:3032)
at jQuery (jquery.js:98)
at c (bootstrap.min.js:21)
at HTMLAnchorElement.<anonymous> (bootstrap.min.js:21)
at Function.each (jquery.js:362)

This is the error that appears in the chrome console the way I try to capture the value is as follows

$(document).ready(function () {

    $("#tipoAlerta").change(function () {
        var data = $('#tipoAlerta').val();
        alert(data);
    });

});

This is the html rendering code

<div class="box box-info">
    <div class="box-header"></div>
    <div class="box-body">
        <div class="row form-group">
            <div class="col-md-2">
                <label class="control-label">Tipo de alerta</label>
            </div>
            <div class="col-md-10">
                <select class="form-control" id="tipoAlerta" name="tipoAlerta">
                    <option value="">- Seleccionar una -</option>
                    <option value="1">Alerta Acad&#233;mica</option>
                    <option value="2">Alerta Manual</option>
                    <option value="3">Alerta Financiera</option>
                    <option value="4">Alerta Familiar</option>
                    <option value="5">Alerta Salud</option>
                    <option value="6">Alerta de notas</option>
                    <option value="12">Hola Mundo Actualizo??</option>
                    <option value="13">Prueba Actualizo Y mostr&#243; ???</option>
                    <option value="14">probando</option>
                </select>
            </div>
        </div>
    </div>
</div>

I am working with asp.net mvc 4, the way in which I send the data through the ViewBag is as follows:

public ActionResult Index()
    {
        Session["Estado"] = 7;
        Sto_TiposAlertas_NE STANE = new Sto_TiposAlertas_NE();
        SelectList listaTipoAlerta = new SelectList(STANE.ListaTipoAlertas(), "TipoAlerta", "Nombre");
        ViewBag.ListaTipoAlerta = listaTipoAlerta;
        return View();
    }

Someone knows how I can solve this error

    
asked by Jhonny Luis 15.03.2018 в 18:28
source

2 answers

0

I made an example similar to yours and the way I get the value is as follows:

$("#miCombo").change(function () {  //Obtengo el valor en cuanto elijen una opción del combo
        IdValue= $("#miCombo").val();
})

and I initialize it like this:

@Html.DropDownList("miCombo", ViewData["MyViewBag"] as SelectList, new { @IdValue= "Value", @class = "class" }) // Donde new{} es una condición que uso para los datos
    
answered by 15.03.2018 в 19:08
0

It's strange because at the beginning it looks like your jquery is not loading, but if that were the case it would mark you the error from $ (document) .ready (fu ...

Anyway to not leave it, you could include your javascript code in the following way:

@section scripts
{
    <script type="text/javascript">
        $(document).ready(function () {
            $("#tipoAlerta").change(function () {
                var data = $('#tipoAlerta').val();
                alert(data);
            });
    });
    </script>
}

With that you make sure that the jquery is loaded first, and then your code.

    
answered by 15.03.2018 в 21:38