Question

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

    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>

Answer 1

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

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

在你尝试执行的AJAX之前，你的当前jQuery正在执行是正确的。 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已经选择了正确的选项。

Answer 2

谢谢ernie，你帮我解决了这段代码。在我从dropdowlist中选择一些项目后，您的代码尝试选择（来自相同的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>

触发依赖下拉列表的ajax调用

2 个答案: