1

我正在使用以下 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，当我查看视图源时，下拉列表值在那里不可用。

我将选定的下拉值保留在 viewbag 中，回发后，我再次填写相关下拉列表。我正在尝试像回发之前一样设置选定的下拉列表，但它不起作用。

4

2 回答 2

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');
于 2012-12-11T05:44:02.853 回答
0

保罗，你在哪里调用这个函数？我认为您需要在 document.ready 函数中调用它。

您还需要将模型与 selected 值绑定。这样它将在 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

于 2012-12-11T05:42:00.367 回答