Question

我在使用AJAX或更具体地说jQuery的$ get函数设置select选项的选项时遇到了这个问题。我似乎无法使其发挥作用。设置文本框工作正常，但我不明白为什么设置选择选项不起作用。

$(document).ready(function() {
   $youth_id = $('#youth_id').attr('id');
   $.get("./php-scripts/json-get-youth-details.php", { youth_id: $youth_id },
      function(data) {
         $('input[name="lastname"]').val(data.lastname);
         $('select[name="cellgroup_id"]').val(data.cellgroup_id);
      }, "json");
});

我认为问题在于加载顺序。我认为jQuery甚至在body部分的PHP脚本加载之前加载。我不明白，因为jQuery脚本在body标签下面，因此即使在加载脚本之前也必须加载正文。

我尝试删除要在$（document）.ready脚本之后加载的其他脚本（请参阅下面的代码），并且惊讶，惊讶，它的工作原理。但是，我不能删除那些脚本，因为我需要它们，我不能把它们放在前面因为UI标签会被更改（因为引导程序）。哦，我在其他地方找不到解决方案！

<script src="./js/jquery.js"></script>
<script src="./js/jquery-ui-1.10.0.custom.min.js"></script>
<script>
    // Insert $(document).ready script here
</script>
<script src="./js/jquery.tagsinput.js"></script>
<script src="./js/bootstrap-tooltip.js"></script>
<script src="./js/jquery.placeholder.js"></script>
<script src="http://vjs.zencdn.net/c/video.js"></script>
<script src="./js/application.js"></script>
<script src="./js/jquery.dropkick-1.0.0.js"></script>

这是加载选择选项的代码：

    <select class="span3" tabindex="0" name="cellgroup_id">
        <option value="NULL">N/A</option>
        <?php
            $cellgroupOptions = "";
            include_once("./classes/cellgroup.php");
            $cellgroup = new CellGroup();
            $cellgroupList = $cellgroup->getCellGroupList();
            foreach( $cellgroupList as $cellgroupDetail )
            {
                $cellgroup_id = $cellgroupDetail['cellgroup_id'];
                $cellgroup_name = $cellgroupDetail['cellgroup_name'];
                $cellgroupOptions .=<<<EOT
                        <option value="$cellgroup_id">$cellgroup_name</option>
EOT;
            }
            echo $cellgroupOptions;
            ?>
    </select>

根据要求，下面是加载脚本后的HTML中的select输出（PHP和Bootstrap）。 Bootstrap脚本在HTML中发生了很大变化。

<div class="dk_container span3 dk_shown dk_theme_default" id="dk_container_cellgroup_id" tabindex="0">
   <a class="dk_toggle">
      <span class="dk_label">N/A</span>
      <span class="select-icon"></span>
   </a>
   <div class="dk_options">
      <ul class="dk_options_inner">
         <li class="dk_option_current"><a data-dk-dropdown-value="NULL">N/A</a></li>
         <li class=""><a data-dk-dropdown-value="1">Arrows of God</a></li>
         <li class=""><a data-dk-dropdown-value="2">Fishmen</a></li></ul></div></div>
      </ul></div>
   </div>
</div>

Answer 1

最后，我找到了解决方案！

因此，$.get函数确实存在一些加载方式的问题。这就是我修复它的方法：

$(window).bind("load", function() {
    $youth_id = $('input[name="youth_id"]').val();
    $.get("./php-scripts/json-get-youth-details.php", { youth_id: $youth_id },
    function(data) {
        $('select[name="cellgroup_id"]').val(data.cellgroup_id);

        $.getScript("./js/jquery.dropkick-1.0.0.js");
        $.getScript("./js/jquery.tagsinput.js");
        $.getScript("./js/bootstrap-tooltip.js");
        $.getScript("./js/jquery.placeholder.js");
        $.getScript("http://vjs.zencdn.net/c/video.js");
        $.getScript("./js/application.js");
    }, "json");
});

我还必须将其他脚本的加载仅放在$.get代码中。它确保在加载其他脚本之前已经设置并完成了值。

唷！谢谢你的帮助！

设置选择的选项以通过$ get jQuery选择不工作

1 个答案: