页面加载时触发/绑定文本框的jquery事件

时间:2019-04-25 18:57:39

标签: javascript c# jquery asp.net-ajax

当用户输入邮政编码并单击下一步以添加更多详细信息时,我在view1中有一个邮政编码文本框,我正在将邮政编码从view1传递到view2。在view2中,我需要根据输入的邮政编码显示州和城市。我已经使用keyup根据输入的zip获取城市和州。当我在view2中更改邮政编码时,它可以正常工作。但是当我从view1到view2时,dods无法工作。我需要在页面加载时触发邮政编码文本框的事件,这是指将邮政编码从view1传递到view2时的事件。现在,当我从view1转到view2时,仅在其各自的文本框中显示邮政编码,并且city和state字段不显示任何内容。如何在页面加载时触发邮政编码文本框的事件或绑定到现有事件?

$(document).ready(function ()
        {
            $("#zip").keyup(function () {
                var el = $(this);

                if (el.val().length === 5) {
                    $.ajax({
                        type:'GET',
                         dataType: "json",
                        cache: true,
                        url: "../api/Getstatelist/" + el.val(),
                        success: function (html) {
                            $.each(html,function(key,value){
$('#state').append($('<option></option>').val(value.State).html(value.State));
});
$.each(html,function(key,value){
$('#city').append($('<option></option>').val(value.City).html(value.City));
});
                        }
                    }); 
                }
            });
  });
<div>
            <div class="city-wrap">
                <select id="city">
                    <option value="">Select City first</option>
                </select>
                <label for="city">City</label>
            </div>
            <div class="state-wrap">
                <select id="state">
                    <option value="">Select State </option>
                </select>
                <label for="state">State</label>
            </div>
            <div class="zip-wrap">
               @Html.TextBoxFor(model => model.Zip, new { @class = "form-control", @id = "zip", @name = "zip" })
                <label for="zip">Zip</label>

            </div>
        </div>

1 个答案:

答案 0 :(得分:0)

我想出了解决方案。添加了如下加载功能。我不确定这是正确的方法。任何建议都会有所帮助。

  $( window ).on( "load", function() {
    var val = $('#zip').val();
if (val.length === 5) {
                    $.ajax({
                        type:'GET',
                         dataType: "json",
                        cache: true,
                        url: "../api/Getstatelist/" + val,
                        success: function (html) {
                            $.each(html,function(key,value){
 $('#state').append($('<option></option>').val(value.State).html(value.State));
});
$.each(html,function(key,value){
$('#city').append($('<option></option>').val(value.City).html(value.City));
});
                        }
                    }); 
                }

}