如何使用jQuery和asp.net webmethods填充html下拉列表 [英] How do i fill html dropdown list using jQuery and asp.net webmethods

问题描述

我有两个< select>< / select>我的网络应用程序中的元素预先填充了国家/地区名称，我希望根据所选国家/地区填充另一个元素。我想使用jQuery和asp.net web方法（我的页面中没有< Form runat =server>标签）下面是我的网页（html）：

I have two <select></select> elements in my web-app one is pre-populated with country names and I want to populate the other one with states based on the country selected. I want to use jQuery and asp.net web methods (I don't have a <Form runat="server"> tag in my page) below is my webpage (html):

<form role="form" method="post" action="Login.aspx?action=register">

    <div class="form-group">
        <label for="exampleInputCountry">Country</label>
        
        <select class="form-control" id="exampleInputCountry" name="exampleInputCountry">
            <option selected="selected">IN</option>
            <option>PK</option>
        </select>
    </div>
    <div class="form-group">
        <label for="exampleInputState">State</label>
        
        <select class="form-control" id="exampleInputState" name="exampleInputState">
        </select>
    </div>
    <div class="form-group">
        <label for="exampleInputCity">City/Town</label>
        
        <input type="text" class="form-control" id="exampleInputCity" name="exampleInputCity" />
    </div>
    <div class="form-actions">
        <button type="submit" class="btn btn-success">Sign Up</button>
    </div>
</form>
<script type="text/javascript">
    $("#exampleInputCountry").change(function () {
        var str;
        $("#exampleInputCountry option:selected").each(function () {
            str += $(this).text() + " ";
        });
        $.ajax({
            url: "/default.aspx/GetStates",
            dataType: 'json',
            data: { country: str },
            success: function (data) {
                $("#exampleInputState").fillSelect(data);
            }
        });

        $.fn.fillSelect = function (data) {
            return this.clearSelect().each(function () {
                if (this.tagName == 'SELECT') {
                    var dropdownList = this;
                    $.each(data, function (index, optionData) {
                        var option = new Option(optionData.Text, optionData.Value);
                        if ($.browser.msie) {
                            dropdownList.add(option);
                        } else {
                            dropdownList.add(option, null);
                        }
                    });
                }
            });
        };

        $.fn.clearSelect = function () {
            return this.each(function () {
                if (this.tagName == 'SELECT')
                    this.options.length = 0;
            });
        };

    }).change();
</script>

这是代码隐藏的webmethod：



< webmethod> _

And this is the codebehind webmethod:

<webmethod> _

Public Function GetStates(country As String) As String
    Dim ConnectionString As String
    ConnectionString = ConfigurationManager.ConnectionStrings("SqlConnectionString").ToString.Trim
    Dim SqlConnection As New Data.SqlClient.SqlConnection(ConnectionString)
    Try
        SqlConnection.Open()
    Catch ex As Exception
        Response.Redirect("ConnectionFailure.aspx")
    End Try
    Dim SqlCommand As New Data.SqlClient.SqlCommand("", SqlConnection)
    SqlCommand.CommandText = "Select * From States Where Country='" & country & "'"
    Dim tblStates As New XDataTable(SqlCommand)
    tblStates.TableName = "States"
    Return Newtonsoft.Json.JsonConvert.SerializeObject(tblStates)

End Function

它不起作用，任何帮助都将不胜感激。

It's not working, any help will be appreciated.

推荐答案

（ ＃exampleInputCountry）。change（ function （）{
var str;

("#exampleInputCountry").change(function () { var str;

（ ＃exampleInputCountry选项：选中）。每个（ function （）{
str + =

("#exampleInputCountry option:selected").each(function () { str +=

（ this ）。text（）+ ;
}）;

(this).text() + " "; });

这篇关于如何使用jQuery和asp.net webmethods填充html下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！