【问题标题】:Bootstrap selectpicker refresh works intermittently after set selected val设置选定值后,引导选择选择器刷新间歇性工作
【发布时间】:2018-08-29 00:11:55
【问题描述】:

我在我的 MVC appmvc 中使用 bootstrap selectpicker 进行两个下拉菜单-

<select id="drpSectorValues" title="Select Sector" name="SectorName" required="required" class="form-control selectpicker show-menu-arrow show-tick"></select>
<select id="drpPractice" title="Select Practice" name="SectorDivisionId" required="required" class="form-control selectpicker show-menu-arrow show-tick"></select>

这些下拉菜单与其他两个下拉菜单级联,并且选项项使用 jQuery AJAX 根据其各自父下拉菜单中加载的项目动态加载。

let $jq = jQuery.noConflict();
loadSectorDropdownValues(parseInt($jq("#drpProjectRegion")[0].selectedIndex + 1));  //works fine
loadPracticeDropdownValues(parseInt($jq("#drpSector")[0].selectedIndex + 1));  //works fine

$jq.when(loadSectorDropdownValues(), loadPracticeDropdownValues()).done(function () {
    //below code is for setting selected item which works intermittently
    setTimeout(function () {
        $("#drpSectorValues").val('@Model.SectorName');
        $('.selectpicker').selectpicker('refresh');
        $("#drpPractice").val(@Model.SectorDivisionId);
        $('.selectpicker').selectpicker('refresh');
    }, 500);
});

下拉选项已通过 AJAX 正确加载,但我无法设置所选项目。有时他们工作,有时不工作。我也没有收到任何 JavaScript 错误。

有人可以看看这是什么问题吗?如果我能提供一些细节,请告诉我。

【问题讨论】:

  • setTimeout 函数中的代码没有意义。我只能假设这必须是一个编辑视图,您已经在之前的创建或编辑操作中选择了 SectorNameSectorDivisionId 的值。如果是这种情况,那么您需要研究this DotNetFiddle 中的代码以了解如何生成级联下拉列表(您需要使用DropDownListFor() 绑定到您的模型,并且第二个下拉列表选项根据之前选择的值填充)
  • @StephenMuecke 是的,你是对的。不幸的是,由于某种原因,我无法使用 Razor 控件。我能够通过一些更改来解决这个问题。请查看我的更新代码。
  • 答案在答案部分,而不是问题:)
  • @StephenMuecke 好的,我会添加它:)

标签: jquery asp.net-mvc twitter-bootstrap


【解决方案1】:

似乎我错误地使用了 jQuery when() 函数。我进行了以下更改,现在可以正常使用-

let $jq = jQuery.noConflict();
var regionId = parseInt($jq("#drpProjectRegion")[0].selectedIndex + 1);
var sectorId = parseInt($jq("#drpSector")[0].selectedIndex + 1);

$jq.when(loadSectorDropdownValues(regionId), loadPracticeDropdownValues(sectorId)).done(function () {
    $("#drpSectorValues").val('@Model.SectorName');
    $("#drpPractice").val(@Model.SectorDivisionId);
    $('.selectpicker').selectpicker('refresh');
});

【讨论】:

    猜你喜欢
    • 2011-07-09
    • 1970-01-01
    • 1970-01-01
    • 2015-12-27
    • 2018-02-06
    • 1970-01-01
    • 2015-06-21
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多