DropdownList does not pass value but triggers script. DropdownListFor passes value but does not trigger script

Question

I have this script in my view (this is the source):

<script type="text/javascript" src="../../Scripts/jquery-1.7.1.js"></script>
<script type="text/javascript">

    $(document).ready(function () {
        $("#state").prop("disabled", true);
        $("#country").change(function () {
            if ($("#country").val() != "Please select") {
                var options = {};
                options.url = "/companies/getbolag";
                options.type = "POST";
                options.data = JSON.stringify({ country: $("#country").val() });
                options.dataType = "json";
                options.contentType = "application/json";
                options.success = function (states) {
                    $("#state").empty();
                    for (var i = 0; i < states.length; i++) {
                        $("#state").append("<option>" + states[i] + "</option>");
                    }
                    $("#state").prop("disabled", false);
                };
                options.error = function () { alert("Fel vid bolagshämtning!"); };
                $.ajax(options);
            }
            else {
                $("#state").empty();
                $("#state").prop("disabled", true);
            }
        });
    });

</script>

It populates a second dropdown list based on what is selected in the first. Cascading dropdowns.

This HtmlHelper triggers the script but when submitted omits the value:

@Html.DropDownList("country", ViewData["kundLista"] as SelectList)

This one does the opposite, it submits the value but does not trigger the script:

@Html.DropDownListFor(model => model.Kund, ViewData["kundLista"] as SelectList)

I need it to both trigger the script and submit the value. How do I do this?

Answer 1

Since the name of your property is Kund, second helper creates a select element which has both id and name fields set to Kund. On the other hand your script uses id country to address this select. So you have two options:

1. Change id used in the script to #Kund:

   $("#Kund").change(function () {
       if ($("#Kund").val() != "Please select") {
   

2. Use first helper with correct name and id:

   @Html.DropDownList("Kund", ViewData["kundLista"] as SelectList), new {@id="country"})
   

Answer 2

if you look at the rendered html the drop down list for is creating an id of Kund which won't match your script. I would recommend putting a class on your drop downs that won't change

@Html.DropDownListFor(x => x.Kund, selectlist, new { @class = "Kund" })

then in your script change your selector from #country to .Kund

Drop down list for will tie the drop down to your model which is why you are getting the passed value. For the other drop down if you create a List and pass that to the view you can set the selected item there and that will hopefully set the drop down list for you