Question

好吧我正在使用几个插件，首先从php文件中填充一些选项，然后使用“Chosen”插件在select中添加一些搜索功能。问题是，一旦我加载页面，所选择的内容将被添加到select中，但select将有0个选项，直到我刷新页面。我不知道它是否与它们被调用的顺序有关，但在移动版本上它似乎正在加载。（虽然我没有看到任何搜索CSS就在那里）。

以下是事情发生的顺序。

HTML 头

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>

    function LeagueOptions() {
        var load = $.get('functions.php',{function:"LeagueOptions"});
        $(".leagueOpts").html('Refreshing');
        load.error(function() {
          console.log("Mlkia kaneis");
          $(".leagueOpts").html('failed to load');
          // do something here if request failed
        });
        load.success(function( res ) {
          console.log( "Success" );
          $(".leagueOpts").html(res);

        });
        load.done(function() {
          console.log( "Completed" );
        });
     }
    function fillTeams(){
        var load = $.get('functions.php',{function:"fillTeams"});
        $(".fillTeams").html('Refreshing');
        load.error(function() {
          console.log("Mlkia kaneis");
          $(".fillTeams").html('failed to load');
          // do something here if request failed
        });
        load.success(function( res ) {
          console.log( "Success" );
          $(".fillTeams").html(res);
            // Datepicker
            $('#datepicker1').datepicker({
              format: 'yyyy-dd-mm'
            });

        });
        load.done(function() {
          console.log( "Completed" );
        });
    }
    </script>

页面中间

                        <select name="teamName" class="fillTeams" id="default-select">
                            <script>
                            fillTeams();
                            </script>
                        </select>

                        <select name="leagueID" class="leagueOpts">
                            <script>
                            LeagueOptions();
                            </script>
                        </select>

页面底部

<script language="javascript" type="text/javascript" src="js/plugins/chosen/chosen/chosen.jquery.min.js"></script> 

    <script type="text/javascript">
        var config = {
          '.chosen-select'           : {},
          '.chosen-select-deselect'  : {allow_single_deselect:true},
          '.chosen-select-no-single' : {disable_search_threshold:10},
          '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
          '.chosen-select-width'     : {width:"95%"}
        }
        for (var selector in config) {
          $(selector).chosen(config[selector]);
        }
        var config2 = {
          '.fillTeams'           : {},
          '.fillTeams-deselect'  : {allow_single_deselect:true},
          '.fillTeams-no-single' : {disable_search_threshold:10},
          '.fillTeams-no-results': {no_results_text:'Oops, nothing found!'},
          '.fillTeams-width'     : {width:"95%"}
        }
        for (var selector in config2) {
          $(selector).chosen(config2[selector]);
        }
        var config3 = {
          '.leagueOpts'           : {},
          '.leagueOpts-deselect'  : {allow_single_deselect:true},
          '.leagueOpts-no-single' : {disable_search_threshold:10},
          '.leagueOpts-no-results': {no_results_text:'Oops, nothing found!'},
          '.leagueOpts-width'     : {width:"95%"}
        }
        for (var selector in config3) {
          $(selector).chosen(config3[selector]);
        }
    </script>

这不应该是正确的顺序吗？声明函数，调用它们来填充选择，然后在底部将插件添加到该特定类中？为什么只有在刷新后它才会加载选择中的数据？

Answer 1

是的，这是正确的订单但是底部的代码将在您的ajax调用返回内容之前运行。将整个选择的配置放入一个函数中，比如说setupChosen(){...allthatcode...}并在成功方法中调用它。

load.success(function( res ) { 
    setupChosen(); 
    ...other code... 
}

编辑：看起来你正在设置两个选择，这两个选择都需要在选择之前加载才能绑定到它们。有几种方法可以做到，但你可能会尝试这样的事情。

<强> HTML ：

    <select name="teamName" class="fillTeams" id="default-select">
    </select>

    <select name="leagueID" class="leagueOpts">
    </select>

<强> JS ：

$(document).ready(function(){
    LeagueOptions();
});
function LeagueOptions() {
    var load = $.get('functions.php',{function:"LeagueOptions"});
    $(".leagueOpts").html('Refreshing');
    load.error(function() {
      $(".leagueOpts").html('failed to load');
    });
    load.success(function( res ) {
      $(".leagueOpts").html(res);
    });
    load.done(function() {
    // Call the next load once it's finished
    fillTeams();
    });
 }
function fillTeams(){
    var load = $.get('functions.php',{function:"fillTeams"});
    $(".fillTeams").html('Refreshing');
    load.error(function() {
      $(".fillTeams").html('failed to load');
    });
    load.success(function( res ) {
      $(".fillTeams").html(res);
        $('#datepicker1').datepicker({
          format: 'yyyy-dd-mm'
        });

    });
    load.done(function() {
        // Now that we've loaded both, set up Chosen
        setupChosen();
    });
}

jQuery在第二次刷新之前不会加载数据

1 个答案: