我有 2 个带有 jquery 代码的单选按钮,它们仅使用他们选择的选项重建下拉列表。我有下面的代码,它转到正确的方法,并且构建选择列表的方法正常工作,并且该方法完成后,下拉列表项根本不会改变。一切似乎都是正确的,但就是行不通。有人有什么想法吗?
查看
$('#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();
}
最佳答案
将 html 更改为
@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>
和脚本
$('.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));
});
});
});
另请注意,您不需要将集合转换为 SelectList
,只需要以下内容
return Json(numberOfPagesList, JsonRequestBehavior.AllowGet);
关于javascript - Jquery更改功能似乎可以工作,但没有做任何事情,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26990987/