Onchange Event for HTML.Dropdownlist

onchange event for html.dropdownlist

You can do this

@Html.DropDownList("Sortby", new SelectListItem[] { new SelectListItem() 
  { 

       Text = "Newest to Oldest", Value = "0" }, new SelectListItem() { Text = "Oldest to Newest", Value = "1" } , new
       {
           onchange = @"form.submit();"
       }
})

how to use javascript's onchange for @Html.DropDownListFor

Where onclick is, just change that to onChange="javascript://whatever function you want()"

for example

@Html.DropDownListFor(model => Tlitem.JobType, (SelectList)newSelectList, new { @class = "form-control js-select js-noFilter hidden", size = "2", @value = 0, Id = "JobType" + t ,@onchange="javascript:onChangeFunction()";

Trigger Onchange event of a dropdownlistFor

I have managed to solve the issue with the help of @StephenMuecke comments.

All I had to do was, to populate the dropdowns while passing the model to the view.

Code:

Model usersDetail = users.userDetail;
ViewBag.State = getStateList(usersDetail.CountryId).Select(m => new SelectListItem() { Text = m.StateName, Value = m.Id.ToString() });
ViewBag.City = getCityList(usersDetail.StateId).Select(m => new SelectListItem() { Text = m.CityName, Value = m.Id.ToString() });
return View(usersDetail);

and modified .cshtml to populate state and city from viewbag:

<div class="row clearfix">
    <div class="col-lg-2 col-md-2 col-sm-4 col-xs-5 form-control-label">
        <label>Country</label>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-8 col-xs-7">
        <div class="form-group">
            <div class="form-line">
                @Html.DropDownListFor(m => m.CountryId, (IEnumerable<SelectListItem>)ViewBag.country, "-- Please select --", new { @class = "form-control show-tick" })
            </div><label id="CountryListLable" style="color:red;"></label>

        </div>
    </div>

    <div class="col-lg-1 col-md-1 col-sm-4 col-xs-5 form-control-label">
        <label>State</label>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-8 col-xs-7">
        <div class="form-group">
            <div class="form-line">
                @Html.DropDownListFor(m => m.StateId, (IEnumerable<SelectListItem>)ViewBag.State, "-- Please select --", new { @class = "form-control show-tick" })
                @*<select id="State" class="form-control show-tick">
                    <option>-- Please select --</option>
                </select>*@
            </div>
            <label id="StateListLable" style="color:red;"></label>
        </div>
    </div>
    <div class="col-lg-1 col-md-1 col-sm-4 col-xs-5 form-control-label">
        <label>City</label>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-8 col-xs-7">
        <div class="form-group">
            <div class="form-line">
                @Html.DropDownListFor(m => m.fKCityId, (IEnumerable<SelectListItem>)ViewBag.City, "-- Please select --", new { @class = "form-control show-tick" })
                @*<select id="ddCity" name="ddCity" class="form-control show-tick">
                    <option value="0">-- Please select --</option>
                </select>*@
            </div>
            <label id="CityListLable" style="color:red;"></label>
        </div>
    </div>
</div>

call javascript function onchange event of dropdown list

Your code is working just fine, you have to declare javscript method before DOM ready.

Handling onchange event in HTML.DropDownList Razor MVC

Description

You can use another overload of the DropDownList method. Pick the one you need and pass in
a object with your html attributes.

Sample

@Html.DropDownList("CategoryID", null, new { @onchange="location = this.value;" })

More Information

• MSDN - SelectExtensions.DropDownList Method

Javascript change event for html.dropdownlist

jQuery's .val() function can also be used to set a value by supplying the value as an argument:

$('#MainDropDownListID').change(function () {
    var SelectedValue = $(this).val();
    $('table select').val(SelectedValue);
});

on select change event - Html.DropDownListFor

Give both dropdowns unique IDs using the HTTPAttributes field:

@Html.DropDownListFor(m => m.DistrictId, ViewData["DMManagers"] as IEnumerable<SelectListItem>, "Select One", new {@id="ddlDMManagers"})

2nd dropdown should be initialized as an empty list:

@Html.DropDownListFor(m => m.TMId, Enumerable.Empty<SelectListItem>(), new {@id="ddlTMManagers"})

If you don't mind using jQuery ajax to update the 2nd dropdown when a 'change' event is triggered on the 1st dropdown:

$(function() {
    $('select#ddlDMManagers').change(function() {
        var districtId = $(this).val();

        $.ajax({
            url: 'LoadTerritoryManagers',
            type: 'POST',
            data: JSON.stringify({ districtId: districtId }),
            dataType: 'json',
            contentType: 'application/json',
            success: function (data) {
                $.each(data, function (key, TMManagers) {
                    $('select#ddlTMManagers').append('<option value="0">Select One</option>');
                    // loop through the TM Managers and fill the dropdown
                    $.each(TMManagers, function(index, manager) {
                        $('select#ddlTMManagers').append(
                            '<option value="' + manager.Id + '">'
                            + manager.Name + 
                            '</option>');
                    });
                });
            }
        });
    });
});

Add this class to your controller namespace:

public class TMManager
{
    public int Id {get; set;}
    public string Name {get; set;}
}

You will need to update your controller action, LoadTerritoryManagers(), to respond to the ajax request and return a JSON array of {Id,Name} objects.

    [HttpPost]
    public ActionResult LoadTerritoryManagers(int districtId)
    {
        var _TMS = (from c in SessionHandler.CurrentContext.ChannelGroups
                join cgt in SessionHandler.CurrentContext.ChannelGroupTypes on c.ChannelGroupTypeId equals cgt.ChannelGroupTypeId
                where cgt.Name == "Territory" && c.ParentChannelGroupId == districtId
                select new TMManager(){ Id = c.ChannelGroupId, Name = c.Name }).OrderBy(m => m.Name);

        if (_TMS == null)
            return Json(null);

        List<TMManager> managers = (List<TMManager>)_TMS.ToList();
        return Json(managers);
    }

MVC DropDownList onchange event with value

Try using a lower case 'v' for 'this.Value'

new { onchange = "onNearestDealersChange(this.value);"}

How to by pass value of dropdownlist to event onchange in MVC ?

The this.value here refer to the context of server-side C#, you need to bind the this of the dropdown list on JavaScript onchange = "GetProduct(this, 123)"

@Html.DropDownList("cblist_id", (IEnumerable<SelectListItem>)ViewBag.listproduct, new { size = 5, @class = "form-control", onchange = "GetProduct(this, 123)" })

and with your function, GetProduct do the following

function GetProduct(drp, number){
     $(drp).val() 
     //  or
     drp.value
}

and something else to pass the value directly like so

@Html.DropDownList("cblist_id", (IEnumerable<SelectListItem>)ViewBag.listproduct, new { size = 5, @class = "form-control", onchange = "GetProduct(this.value, 123)" })

function GetProduct(selectedValue, number){

}

---

Related Topics