1

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

$(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 甚至在正文部分中的 PHP 脚本加载之前加载。我不明白，因为 jQuery 脚本位于 body 标记下方，因此即使在加载脚本之前也必须加载 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>

根据要求，下面是加载脚本（PHP 和 Bootstrap）后 HTML 中选择的输出。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>
4

1 回答 1

0

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

因此，该$.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代码中。它确保在加载其他脚本之前已经设置并完成了这些值。

呸！谢谢你们的帮助！

于 2013-07-03T16:55:03.483 回答