Jquery change function seems to work but doesn'

问题:

I have 2 radio buttons with jquery code that rebuilds a dropdownlist with just the options that they choose. I have the code below and it goes to the proper method and the method to build the select list works properly and after the method is finished, the dropdownlist items don't change at all. Everything seems to be correct but it just doesn't work. Does anyone have any ideas?

View

$('#singleSpacingRadio').change(function () {
        var url = "/Home/NumberOfPagesList?id=" + $('#singleSpacingRadio').val();

        $.getJSON(url, function (data) {
            var items = "<option>--Test--</option>";
            $.each(data, function (i, numberOfPages) {
                items += "<option value='" + numberOfPages.Value + "'>" + numberOfPages.Text + "</option>";
            });
            $("#numberOfPagesList").html(items);
        });
    });

    $('#doubleSpacingRadio').change(function () {
        var url = "/Home/NumberOfPagesList?id=" + $('#doubleSpacingRadio').val();

        $.getJSON(url, function (data) {
            var items = "<option>--Test--</option>";
            $.each(data, function (i, numberOfPages) {
                items += "<option value='" + numberOfPages.Value + "'>" + numberOfPages.Text + "</option>";
            });
            $("#numberOfPagesList").html(items);
        });
    });

<div class="row">
    @Html.LabelFor(model => model.Spacing, "Spacing:")
    @Html.RadioButtonFor(model => model.Spacing, "Single", new { id = "singleSpacingRadio" }) Single
    @Html.RadioButtonFor(model => model.Spacing, "Double", new { id = "doubleSpacingRadio" }) Double
</div>

Controller

public ActionResult NumberOfPagesList(string id)
    {
        var numberOfPagesList = from n in NumberOfPages.GetNumberOfPages()
                          where n.Spacing == id
                          select n;

        if (HttpContext.Request.IsAjaxRequest())
        {
            return Json(new SelectList(numberOfPagesList.ToArray(), "numberOfPagesValue", "numberOfPagesName"), JsonRequestBehavior.AllowGet);
        }
        else
        {
            return RedirectToAction("Contact");
        }
    }

public class NumberOfPages
{
    public string Name { get; set; }
    public string Value { get; set; }
    public string Spacing { get; set; }

    public static IQueryable<NumberOfPages> GetNumberOfPages()
    {
        return new List<NumberOfPages>
        {
            new NumberOfPages
            {
                Name = "1 Page (Approx. 550 Words)",
                Value = "1",
                Spacing = "Single"
            },
            new NumberOfPages
            {
                Name = "1 Page (Approx. 275 Words)",
                Value = "1",
                Spacing = "Double"
            },
            new NumberOfPages
            {
                Name = "50 Pages (Approx. 13750 Words)",
                Value = "50",
                Spacing = "Double"
            }
        }.AsQueryable();
    }

回答1:

Change the html to

@Html.RadioButtonFor(m => m.Spacing, "Single", new { @class = "spacing", id="single" })
<label for="single">Single</label>
@Html.RadioButtonFor(m => m.Spacing, "Double", new { @class = "spacing", id="double" })
<label for="double">Double</label>

and the script to

$('.spacing').click(function() {
  var select = $("#numberOfPagesList");
  select.empty().append($('<option></option>').val('').text('--Test--'));
  var url = '@Url.Action("NumberOfPagesList", "Home")';
  $.getJSON(url, { id: $(this).val() }, function (data) {
    $.each(data, function (i, item) {
      select.append($('<option></option>').val(item.Value).text(item.Name));
    });
  });
});

Note also you do not need to return convert your collection to a SelectList and only the following is required

return Json(numberOfPagesList, JsonRequestBehavior.AllowGet);