通过 $get jQuery 为 select 设置选定选项不起作用答案

【问题标题】：Set selected option for select not working via $get jQuery通过 $get jQuery 为 select 设置选定选项不起作用
【发布时间】：2013-07-01 09:09:51
【问题描述】：

关于使用 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>

【问题讨论】：

我可以向您保证，jQuery 不会在 PHP 之前加载。
@adeneo 谢谢！那么，可能是什么问题？显然，设置文本框工作正常，但我不明白为什么设置选择选项不起作用。（编辑了第1段和第1个代码块）
您确定该值存在于您的选择选项列表中吗？
@tymeJV 已编辑。对！我尝试在 $.get 函数之外对其进行硬编码，它可以工作：$('select[name="cellgroup_id"]').val("1"); 我还在 $.get 函数中尝试了这段代码，它可以工作。因此，我确保 data.cellgroup_id 使用警报返回值“1”。确实如此，但我不知道为什么它没有改变选定的值。
在您的$.get 中，再次硬编码该值。它是设置它还是忽略它？

标签： jquery ajax

【解决方案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 代码中。它确保在加载其他脚本之前已经设置并完成了值。

呸！谢谢大家的帮助！

【讨论】：