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ます。

実行しようとしているAJAXの前に現在のjQueryが実行されているのは正しいです。 idx事前に設定できますが、選択したオプションの設定は、ドロップダウンが入力された後に行う必要があります。そのため、これを成功関数に移動します。現在の方法（で$(function(){）では、そのスクリプトブロックをドキュメントの準備完了に配置します-これ$(function(){は実際にはの省略形です$(document).ready(function() {。つまり、その関数のスクリプトは、ドキュメントの準備ができたときに実行されます（AJAXを使用してDOMを更新したときではありません）。 。速記の詳細は、 Rate Me：UsingAJAXセクションの直前のドキュメントで読むことができます。

JavaScriptを希望どおりに機能させるには、最初のブロックを削除し<script>、2番目のブロックを次のように変更します。

<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に感謝します、あなたはこのコードで私を助けてくれます。dropdowlistからアイテムを選択した後、（同じddlから）何かを選択しようとしているコード。私は似たようなものを書いて、それはうまくいきます。ロードページで値を選択すると、2番目の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 に答える