设置选定值后，引导选择选择器刷新间歇性工作

Posted 2023-05-08

【中文标题】设置选定值后，引导选择选择器刷新间歇性工作

【英文标题】：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 函数中的代码没有意义。我只能假设这必须是一个编辑视图，您已经在之前的创建或编辑操作中选择了 SectorName 和 SectorDivisionId 的值。如果是这种情况，那么您需要研究this DotNetFiddle 中的代码以了解如何生成级联下拉列表（您需要使用DropDownListFor() 绑定到您的模型，并且第二个下拉列表选项根据之前选择的值填充）

@StephenMuecke 是的，你是对的。不幸的是，由于某种原因，我无法使用 Razor 控件。我能够通过一些更改来解决这个问题。请查看我的更新代码。

答案在答案部分，而不是问题:)

@StephenMuecke 好的，我会添加它:)

【参考方案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');
);