Question

我正在使用以下jQuery来填充级联下拉列表 -

<script type="text/javascript">
    $(document).ready(function () {

  $("#ddlBrand1").change(function () {

  $.getJSON("URL", { id: idBrand },
        function (carModelData) {
            $("#ddlModel1").removeAttr('disabled');
            var select = $("#ddlModel1");
            select.empty();

            select.append($('<option/>', { value: '', text: "---Select Model---" }));
            $.each(carModelData, function (index, itemData) {
                select.append($('<option/>').val(itemData.Value).html(itemData.Text ));
            });
        });
  });

它正确地绑定了下拉列表，但问题是它不生成HTML，当我查看viewsource时，下拉值在那里不可用。

我在viewbag中保留选定的下拉值，在回发后，我再次填写依赖下拉列表。我试图在回发之前设置选定的下拉列表，但它不起作用。

Answer 1

而不是options.append($("<option />").val(item.ImageFolderID).text(item.Name));，你会想要使用：

options.append($("<option />").val(item.ImageFolderID).html(item.Name));

为下拉选项设置html（）而不是text（）将允许它存在于生成的源中。

修改

因为要清除select集合，所以需要再次对元素运行jQuery选择。不需要将其保存在变量中（通常很有用），您需要在进行更改后更新内容。

你可能想尝试更像这样的东西：

//Use this to clear the select & add the default first option: $('#dd1Model1').find('option').remove().end().append('<option value="">---Select Model---</option>').val(''); //Use this to populate the select $.each(carModelData, function(index, itemData) { $('#dd1Model1').append('<option value="' + itemData.Value + '">' + itemData.Text + '</option>').val(itemData.Value); }); //Use this to select the first option by default $('#dd1Model1 option:eq(0)').attr('selected', 'selected');

Answer 2

保罗，你在哪里调用这个功能？我想你需要在document.ready函数中调用它。

您还需要使用所选值绑定模型。这样它就可以在html中使用了。没有回发，一旦发送数据，就没有会话管理。响应将是基于您从控制器制作的模型的新页面。

我怀疑脚本在响应后或在你的帖子中没有执行。请验证。因为ajax加载或脚本未执行，html不包含值。请确保您提供的脚本正在运行。

请准备好您的文件以更新问题。

修改

$("#ddlBrand1").change(function () { //this will trigger only when ddlBrand1 changes $.getJSON("URL", { id: idBrand }, function (carModelData) { // check this line of code executes ? // alert(carModelData) may expected to return some thing // other than null $("#ddlModel1").removeAttr('disabled'); // makes ddlModel1 active var select = $("#ddlModel1"); select.empty(); // clears the items of #ddlModel1 select.append($('<option/>', { value: '', text: "---Select Model---" })); // adds new --Select-- (you can give value as 0) $.each(carModelData, function (index, itemData) { select.append($('<option/>').val(itemData.Value).html(itemData.Text )); }); // this will loops the JSON result from the server and adds the option (items) }); });

故障排除技巧

1.This function will call only when 'ddlBrand1' changes. For this to happen ddlBrand1 needs to have more than one option. 2. Check whether getJSON returns a proper value. 3. Verify the url,parameters and the result (here carModelData). Alert it. 4. Also verify the response from server is not null. You need to verify the controller, action etc. An error occurred in controller also leads to same issue. 5. Refer this below and add .error,.sucess,.complete

jQuery 1.5中的Promise接口也允许使用jQuery的Ajax方法，包括$ .getJSON（），链接多个.success（）,. complete（）和单个请求上的.error（）回调，甚至分配这些回调请求可能已完成后的回调。如果请求是已经完成，立即触发回调。点击此处url

ASP.Net MVC Jquery AJAX调用确实在viewsource中呈现html

2 个答案: