觸發ajax調用依賴下拉列表

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

謝謝埃爾尼，你幫我用這段代碼。在我從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> 

Answer 2

我正確理解您想在更新下拉菜單後選擇該項目嗎？

所以，首先要做的第一件事，就是您手動編寫了jQuery觸發器並使用dropDownList。你應該選擇一個或另一個。我的答案是假設你正在手動編寫JavaScript，但是這可以輕鬆地放在ajax數組中傳遞給dropDownList。

你是正確的，你當前的jQuery在你試圖執行的AJAX之前執行。 idx可以提前設置，但設置選定的選項必須在填充下拉菜單後完成，這就是爲什麼我們將其移入成功功能的原因。您目前擁有它的方式（在$(function(){中）將腳本塊放置在文檔中準備好了 - $(function(){實際上是$(document).ready(function() {的簡寫，意味着該文檔已準備好時該函數中的任何腳本都將運行（而不是在更新DOM時使用AJAX）。關於速記的詳細信息可以在文檔中閱讀，就在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已經有選擇了正確的選項。