Question

我在我的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错误。

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

Answer 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');
});

设置选定的val

1 个答案: