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。如何在不关闭模态的情况下加载组合框城市？

感谢您的帮助

Answer 1

我建议使用Ajax来实现此目的。详细的代码也是如此首先将空的span或div放在id =“citycontainer”的状态选择框附近

$('[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;

在fancybox中装入第二个组合框

1 个答案: