在fancybox中加载第二个组合框

Question

我有一个组合框与2个fancybox模式，州和城市。我需要在选择州后加载一个组合城市。我的代码：

<div id="city" class="hide">

    <asp:Literal ID="litCity" runat="server"></asp:Literal>
    <a href="#data">Trocar de Cidade</a>

</div>

<asp:UpdatePanel ID="updCity" runat="server" UpdateMode="Conditional">
<ContentTemplate>

    <div id="data" class="hide">

    <asp:HiddenField ID="hdnNovaCidade" runat="server" Value="" />
    <div class="row">

    <label for="drpState">Estado *</label>
    <asp:DropDownList ID="drpState" runat="server" AutoPostBack="True" > </asp:DropDownList>

    </div>

<div class="row">

    <label for="drpCity">Cidade *</label>
    <asp:DropDownList ID="drpCity" runat="server"></asp:DropDownList>


</div>

    <input id="btCidade" type="submit" value="Escolher Cidade" />

</div>
</ContentTemplate>
<Triggers>

    <asp:AsyncPostBackTrigger ControlID="btCarregaCidade" EventName="Click" />

</Triggers>
</asp:UpdatePanel>

JQUERY

$('[id$="drpState"]').change(function () {

    $('[id$="hdnState"]')[0].value = $(this).val();
    $('[id$="btCarregaCidade"]')[0].click();

});

发生的情况是，页面在事件按钮之后重新加载并关闭fancybox。如何在不关闭模式的情况下加载combobox城市？

感谢你的帮助

Answer 1

我建议为这个容器使用Ajax是详细的代码，首先用id=“purpose..here”在你的状态选择框旁边放一个空的跨度或者div。

$('[id$="drpState"]').change(function () {
var stid = $(this).val();
var cityhtml = '';
         //call an ajax function to load the states
    $.ajax({
      url:'Your_url_containing_thephp_function_for_states',
      data : {'stateid',stid},
      dataType:'json',
      type: "POST",
      success:function(msg){
             cityhtml+='<select id="city">';
                if(count(msg)>0){
                for(i=0;i<msg.length;i++){

             cityhtml+='<option value="'+msg[i]['your_city_id_index']+'">'+msg[i]['your_city_name_index']+'</option>';
                 }
             }
$('#citycontainer').html(cityhtml);
      }    
});


});

//State.php (The php side)

$stateid = $_POST['stateid'];
$cities = someFuntionReturningCitiesbasedOnstateid($stateid); //must return as array
echo json_encode($cities);exit;