jQuery的变化功能似乎工作，但不会做任何事情 [英] Jquery change function seems to work but doesn't do anything
本文介绍了jQuery的变化功能似乎工作，但不会做任何事情的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我用jQuery code，重建与只是他们选择的选项一个DropDownList 2单选按钮。我有以下code和它去的正确方法，并建立选择列表中正常工作，该方法完成后，将DropDownList的项目根本不改变方法。一切似乎是正确的，但它只是不工作。没有人有任何想法？
查看
$（'＃singleSpacingRadio'）。改变（函数（）{
VAR URL =/首页/ NumberOfPagesList ID =+ $（'＃singleSpacingRadio）VAL（）。 $ .getJSON（URL，功能（数据）{
VAR项目=＆LT;选项＆GT; - 测试 - ＆LT; /选项＆gt;中;
$。每个（数据，功能（我，numberOfPages）{
项目+ =＆LT;期权价值='+ numberOfPages.Value +'＆gt;中+ numberOfPages.Text +＆LT; /选项＆gt;中;
}）;
$（＃numberOfPagesList）HTML（项目）;
}）;
}）; $（'＃doubleSpacingRadio'）。改变（函数（）{
VAR URL =/首页/ NumberOfPagesList ID =+ $（'＃doubleSpacingRadio）VAL（）。 $ .getJSON（URL，功能（数据）{
VAR项目=＆LT;选项＆GT; - 测试 - ＆LT; /选项＆gt;中;
$。每个（数据，功能（我，numberOfPages）{
项目+ =＆LT;期权价值='+ numberOfPages.Value +'＆gt;中+ numberOfPages.Text +＆LT; /选项＆gt;中;
}）;
$（＃numberOfPagesList）HTML（项目）;
}）;
}）;＆LT; DIV CLASS =行＆GT;
@ Html.LabelFor（型号=＆GT; model.Spacing，间距）
@ Html.RadioButtonFor（型号=＆GT; model.Spacing，单，新{ID =singleSpacingRadio}）单
@ Html.RadioButtonFor（型号=＆GT; model.Spacing，双，新{ID =doubleSpacingRadio}）双
＆LT; / DIV＆GT;
控制器
公众的ActionResult NumberOfPagesList（字符串ID）
{
在NumberOfPages.GetNumberOfPages VAR numberOfPagesList =从N（）
其中，n.Spacing == ID
选择N; 如果（HttpContext.Request.IsAjaxRequest（））
{
返回JSON（新的SelectList（numberOfPagesList.ToArray（），numberOfPagesValue，numberOfPagesName），JsonRequestBehavior.AllowGet）;
}
其他
{
返回RedirectToAction（联系方式）;
}
}公共类NumberOfPages
{
公共字符串名称{;组; }
公共字符串值{获得;组; }
公共字符串间距{搞定;组; } 公共静态的IQueryable＆LT; NumberOfPages＆GT; GetNumberOfPages（）
{
返回新的List＆LT; NumberOfPages＆GT;
{
新NumberOfPages
{
NAME =1页（约550字），
值=1，
间距=单
}，
新NumberOfPages
{
NAME =1页（约275字），
值=1，
间距=双师型
}，
新NumberOfPages
{
NAME =50页（约13750字），
VALUE =50
间距=双师型
}
} .AsQueryable（）;
}
解决方案
在HTML改为
@ Html.RadioButtonFor（M = GT; m.Spacing，单，新{@class =间距ID =单}）
＆LT;标签=单一＆GT;单，LT; /标签＆gt;
@ Html.RadioButtonFor（M = GT; m.Spacing，双，新{@class =间距ID =双}）
＆LT;标签=双＆GT;双＆LT; /标签＆gt;
和脚本
$（'间距'）。点击（函数（）{
VAR选择= $（＃numberOfPagesList）;
（文本（））VAL（ - Test--'）$（'＆LT;选项＆GT;＆LT; /选项＆GT）。select.empty（）追加;
VAR URL ='@ Url.Action（NumberOfPagesList，家）;
$ .getJSON（URL，{ID：$（本）.VAL（）}，功能（数据）{
$。每个（数据，功能（I，项目）{
select.append（$（'＆LT;选项＆GT;＆LT; /选项＆GT;'）。VAL（item.Value）的.text（item.Name））;
}）;
}）;
}）;
请注意你也不必回到您的收藏转换为的SelectList ，只要求如下
返回JSON（numberOfPagesList，JsonRequestBehavior.AllowGet）;
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();
}
解决方案
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);
这篇关于jQuery的变化功能似乎工作，但不会做任何事情的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
