dimanche 20 décembre 2015

Make select box change values when another value is selected from another select box

I want my select box change depending wich option i choose in the first select, and i want to hide the values that are not from that option

My html here:

<select id="localidad">
            @foreach (ja_era.Models.Localidades localidad in ViewBag.localidades)
            {
                <option value="@localidad.Id">@localidad.Zona</option>
            }
        </select>
        <select name="Localidad" id="barrio">
            @foreach (ja_era.Models.Barrios barrio in ViewBag.barrios)
            {
                <option class="@barrio.Localidad" value="@barrio.Id">@barrio.Barrio</option>
            }
        </select>

The Localidad select has 4 options and bring the countries, then i have the second select that bring the cities all in one select box. Wichones are well defined in my database.

enter image description here

enter image description here

You can see here that "Barrios" has the column localidad where i insert the localidad id

I have tried some js code but cant figure it out how to make it work.

$(document).ready(function() {
       $('#localidad').change(function () {

});
})

Aucun commentaire:

Enregistrer un commentaire