Question

是的，我知道，很可能已经回答了，但找不到它或弄清楚如何成功搜索它，所以，45分钟后我屈服于燃烧的潜力......所以对我来说很容易， OK？

这是一个简单的问题，我的问题是时机。一个选择持有国家，它必须选择州/省。通过单独的功能适当地加载国家，州/省。使用鼠标从州/省中选择，完美。使用JavaScript ..哦哦。问题是我需要强制我的JavaScript等待浏览器加载州/省数据，然后才能定位并选择它。 SetTimeout或使用Promise似乎......不优雅？浏览器需要多少秒才能加载50个州或8个省 - 在新火箭或旧乌龟上？当负载处于单独的功能时，有没有办法知道第二个选择何时完成加载？示例是jquery，但任何风格都可以。

$('#country option[value=US]').prop('selected', 'selected').change();
$('#stp option[value=VT]').prop('selected', 'selected').change();

根据目前为止的回复添加更多说明。

当用户更改国家/地区时，州/省会在他们将鼠标向下移动页面时加载，以便他们选择。现在我已经实现了一个帮助器，它使用电话号码从BigData中提取用户的地址。这发生在一个对话框中。当用户点击“接受”时，此代码将触发

function setFormwithDF(){
    d={};
    // data from dialog
    d.address=$('#oaddress').text();
    d.city=$('#ocity').text();
    d.state=$('#ostate').text();
    d.zip=$('#ozip').text();
    d.country=$('#ocountry').text();

    $('#s_country option[value='+d.country+']').prop('selected', 'selected').trigger('change');
    // doesn't matter if this is .change() or .trigger('change')
    $('#s_addr1').val(d.address).change();
    $('#s_addr2').val('').change();
    $('#s_city').val(d.city).change();
    $('#s_st option[value='+d.state+']').delay(3000).prop('selected', 'selected');console.log(d.state);//getting a good value here - delay is desperation
    $('#s_zip').val(d.zip);
    $('#s_phone').val($('#dfsearch').val());
    $( "#dfsearchdialog" ).dialog('close');
   }

为了完整起见，这是加载代码。虽然这里有一些与这个问题无关的临时演员

$('#s_country,#b_country').change(function(e){
    var st="";
    var addrType="S";
    var loadObj=$('#shipstp');
    if( $(this).attr("id") == 'b_country'){
      loadObj=$('#billstp');
      addrType="B";
    }
    if( typeof(e.st) != 'undefined'){st=e.st;console.log(5)}// this data is passed during the trigger() code
    uObj={c:$(this).val(),nc:Math.random(),t:addrType,p:st};
    uParam=$.param(uObj);
    loadObj.load('/stubs/state-n-province.cfm',uParam);
});

Answer 1

根据我的理解，你不希望用户选择状态，直到状态被加载。加载后只有用户应该能够选择状态。

我假设你正在使用AJAX加载状态。

如果这是问题：

您可以使用加载图片，该图片将一直显示，直到成功未返回且数据尚未映射到元素。

在这种情况下，您可以使用以下示例代码：

function getData(p){
    .......
    $('#loadingmessage').show();  // show the loading message.
    $.ajax({
    url: "loadData.php?id=<? echo $id; ?>",
    type: "POST",
    cache: false,
    data: "&page="+ page,
    success : function(html){
        $(".content").html(html);
        $('#loadingmessage').hide(); // hide the loading message
    }
});

Answer 2

我相信你需要一个Promise。它将完全允许你

只知道第二个选择何时在加载时完成加载在一个单独的函数

$('#country').change(function() {
    $("#stp").empty().append("<option>...</option>");
    loadStates($(this).val())
        .then(states => $("#stp")
            .empty()
            .append(states.reduce((acc, cur) => acc + `<option>${cur}</option>`, "")));
});


$('#country').change();

function loadStates(country) {
    console.log(`Loading states for country: ${country}...`); 
    //setTimeout here just emulates your long loading process
    return new Promise((res, rej) => setTimeout(() => {
            console.log(`States for country: ${country} are loaded!`); 
            res(["state1", "state2", "state3"]);
        }, 3000));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="country">
   <option>US</option>
   <option>UK</option>
   <option>RU</option>
</select>

<select id="stp">
</select>

对于您的实际用例，您可以编写如下内容：

return new Promise((resolve, reject) => {
    var states = yourLoadingFunction();
    resolve(states);
});

更新：鉴于您最新的例子，我认为我现在理解您的问题。我建议你把加载代码放到一个单独的函数中，例如：

function countryChanged(e, callback) {    
    var st="";
    var addrType="S";
    var loadObj=$('#shipstp');
    if( $(this).attr("id") == 'b_country'){
      loadObj=$('#billstp');
      addrType="B";
    }
    loadObj.prop("disabled", true);
    // this data is passed during the trigger() code
    if( typeof(e.st) != 'undefined'){st=e.st;console.log(5)}
    uObj={c:$(this).val(),nc:Math.random(),t:addrType,p:st};
    uParam=$.param(uObj);
    loadObj.load('/stubs/state-n-province.cfm', uParam, function() {
        // when the loading is complete, we enable the second select and 
        // call the callback function
        loadObj.prop("disabled", false);
        if (callback) callback();
    });
}

请注意，jQuery .load()方法有第三个参数，它是一个回调函数，在加载完成时将被调用。

然后您可以通过两种方式使用此功能：

1）当用户更改国家/地区时：

$('#s_country,#b_country').change(countryChanged);

2）在setFormwithDF()函数中：

function setFormwithDF(){
    d={};
    // data from dialog
    d.address=$('#oaddress').text();
    d.city=$('#ocity').text();
    d.state=$('#ostate').text();
    d.zip=$('#ozip').text();
    d.country=$('#ocountry').text();

    $('#s_country option[value='+d.country+']').prop('selected', 'selected');
    //instead of calling .trigger('change') just call countryChanged function
    countryChanged({st: "whatever you pass during the trigger() code"}, function() {
       //this will happen only after .load() is complete
        $('#s_st option[value='+d.state+']').prop('selected', 'selected');
    });
    $('#s_addr1').val(d.address).change();
    $('#s_addr2').val('').change();
    $('#s_city').val(d.city).change();
    $('#s_zip').val(d.zip);
    $('#s_phone').val($('#dfsearch').val());
    $( "#dfsearchdialog" ).dialog('close');
}

如何在使用javascript加载后从第二个选择中选择选项？

2 个答案: