0

如何从 jquery 触发 ajax 调用？如果我在脚本中设置 $("select#country_id").prop("selectedIndex", idx); 和 POS::END 它在 jquery 之前用于下拉列表。我需要从下拉列表中选择一些项目，另一个列表填充数据。

    echo CHtml::dropDownList('country_id','', array(1=>'USA',2=>'France',3=>'Japan'),
       array(
        'ajax' => array(
          'type'=>'POST', //request type
          'url'=>CController::createUrl('currentController/dynamiccities'), 
          'update'=>'#city_id', //selector to update
    ))); 

   empty since it will be filled by the other dropdown
   echo CHtml::dropDownList('city_id','', array());



 <script type="text/javascript">

 $(function(){

  var idx = "<?php echo $smth ?>";
  $("select#country_id").prop("selectedIndex", idx);

 }) 

</script>


<script type="text/javascript">
  /*<![CDATA[*/
  jQuery(function($) {
  jQuery('a.tooltip').tooltip({'placement':'bottom'});
  jQuery('a[rel="popover"]').popover();
  $('body').on('change','#country_id',function(){jQuery.ajax({'type':'POST','url':'/currentController/dynamiccities','cache':false,'data':jQuery(this).parents("form").serialize(),'success':function(html){jQuery("#city_id").html(html)}});return false;});
  });
  /*]]>*/
</script>
4

2 回答 2

2

我是否正确理解您要在更新下拉列表后选择该项目？

所以，首先，当您手动编写 jQuery 触发器并使用dropDownList 时。你应该选择其中之一。我的回答是假设您正在手动编写 javascript，但这也可以很容易地放在 ajax 数组中以传递给dropDownList.

您是正确的，您当前的 jQuery 在您尝试执行的 AJAX 之前执行。 idx可以提前设置，但必须在填充下拉列表后设置所选选项，这就是我们将其移至您的成功功能的原因。您当前拥有它的方式（在 中$(function(){），将该脚本块放置在文档中准备就绪 -$(function(){是 真正的简写$(document).ready(function() {，这意味着该函数中的任何脚本都将在文档准备就绪时运行（而不是在您使用 AJAX 更新 DOM 时） . 可以在文档中阅读有关速记的详细信息，就在Rate Me: Using AJAX部分之前。

要让您的 javascript 按需要工作，请删除第一个<script>块并将第二个块更改为：

<script type="text/javascript">
  /*<![CDATA[*/
  var idx = "<?php echo $smth ?>";
  jQuery(function($) {
  jQuery('a.tooltip').tooltip({'placement':'bottom'});
  jQuery('a[rel="popover"]').popover();
  $('body').on('change','#country_id',
    function(){
        jQuery.ajax({'type':'POST',
                     'url':'/currentController/dynamiccities',
                     'cache':false,
                     'data':jQuery(this).parents("form").serialize(),
                     'success': function(html){
                                    jQuery("#city_id").html(html);
                                    jQuery("#country_id").prop("selectedIndex", idx);
                                }

                    });
        return false;});
  });
  /*]]>*/
</script>

请注意，这仅$smth在您正在填充的下拉列表中确实是选项的索引时才有效。

就个人而言，如果我这样做，而不是使用 prop()，我会使用 attr() 和下拉列表的值，因为这比索引更容易跟踪，并执行以下操作：

<script type="text/javascript">
  /*<![CDATA[*/
  jQuery(function($) {
  jQuery('a.tooltip').tooltip({'placement':'bottom'});
  jQuery('a[rel="popover"]').popover();
  $('body').on('change','#country_id',
    function(){
        jQuery.ajax({'type':'POST',
                     'url':'/currentController/dynamiccities',
                     'cache':false,
                     'data':jQuery(this).parents("form").serialize(),
                     'success': function(html){
                                    jQuery("#city_id").html(html);
                                    var selectedCountry = "#country_id option[value='" + <?php echo $countryID ?> + "']";
                                    jQuery(selectedCountry).attr('selected', 'selected');
                                }

                    });
        return false;});
  });
  /*]]>*/
</script>

更有可能的是，我会在 PHP 中执行此服务器端，并确保我为下拉菜单传回的 HTML 已经选择了正确的选项。

于 2012-12-31T00:10:28.717 回答
0

谢谢ernie，你帮我处理这段代码。在我从下拉列表中选择某些项目后，您的代码试图（从同一个 ddl）选择某些内容。我写了类似的东西，它的工作原理。整个事情是关于在加载页面上选择值，然后我得到第二个 ddl 填充。

<script type="text/javascript">
  /*<![CDATA[*/
  var idx = "<?php echo $smth ?>";
  jQuery(function($) {
  jQuery('a.tooltip').tooltip({'placement':'bottom'});
  jQuery('a[rel="popover"]').popover();
  $('body').on('change','#country_id',
    function(){
        jQuery.ajax({'type':'POST',
                     'url':'/currentController/dynamiccities',
                     'cache':false,
                     'data':jQuery(this).parents("form").serialize(),
                     'success': function(html){
                                    jQuery("#city_id").html(html);
                                }

                    });
        return false;});

   if (idx!="")
   {
    jQuery("#country_id").prop("selectedIndex", idx);
    $('#country_id').trigger('change');
   }

  });
  /*]]>*/
</script>
于 2012-12-31T08:55:02.353 回答