Jquery 更改功能似乎工作，但没有做任何事情

Posted 2023-05-08

【中文标题】Jquery 更改功能似乎工作，但没有做任何事情

【英文标题】：Jquery change function seems to work but doesn't do anything

【发布时间】：2015-01-15 10:40:42

【问题描述】：

我有 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>

控制器

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();
    

【问题讨论】：

尝试调试 javascript。是否有任何控制台错误？

当$('#singleSpacingRadio').change() 事件发生时，$('#doubleSpacingRadio').change() 事件也会触发，因此您只需一遍又一遍地做同样的事情。

这怎么可能？无论如何，我认为它应该单独执行每个事件

它是一个单选按钮组。当一个被选中时，另一个未被选中 - 两者都会触发更改事件！

我不知道 asp.net 究竟在这里生成了什么 - 也许您也可以向我们展示生成的 html 吗？

【参考方案1】：

把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);

【讨论】：

我完全按照您的编写方式尝试了这段代码，但是我的脚本出现语法错误，我的意思是@sStephenMuecke

抱歉，$.getJSON 行中缺少右括号

我也错过了那个右支架。我修复了这个问题，该操作似乎有效，但现在显示完全错误，当我单击其中一个单选按钮时，它现在给我一个下拉列表，每个选项都完全空白。我将尝试在这里放一张截图

再次抱歉，应该是.text(item.Name)，因为那是NumberOfPages的属性名称

非常感谢！你做的事情有点不同，但我现在可以看到它是如何工作的