堆棧內存溢出
  簡體   English   中英

ASP.NET DropDownList JavaScript / jQuery獲取選定的值並填充項目

[英]ASP.NET DropDownList JavaScript/jQuery getting selected value and populating items

 原文  2014-09-11 14:40:41  6   1    javascript/ jquery/ html/ asp.net/ vb.net

問題描述

我已經堅持了兩天了。 我最初使用HTMLSelect元素並獲得成功，直到我意識到我不知道如何通過后面的代碼為它們分配值。 這是使用HTMLSelect元素時的代碼，這些代碼使頁面元素的行為符合我想要的方式： 

<select id="cboCountry" class="autoTBComplete"/>
<select id="cboState" class="autoTBComplete" />

<script type="text/javascript">

$(document).ready(function () {

    $("#cboCountry").bind("change", ValidateCountryInput);
    $("#cboState").bind("change", ValidateStateInput);

    $.ajax({
        type: "POST",
        url: "AjaxService.asmx/GetCountryList",
        contentType: "application/json; charset=utf-8",
        data: "{}",
        datatype:"json",
        success: function (data) {
            var d = data.d
            $(d).each(function (i) {
                $('#cboCountry').append("<option value=" + d[i] + ">" + d[i] + "</option>");
            });
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert(textStatus);
        }
    });
});

function ValidateCountryInput() {
    if (CheckUSAorCAN()) {
        $.ajax({
            type: "POST",
            url: "AjaxService.asmx/GetStateList",
            contentType: "application/json; charset=utf-8",
            data: "{}",
            datatype: "json",
            success: function (data) {
                var d = data.d
                $(d).each(function (i) {
                    $('#cboState').append("<option value=" + d[i] + ">" + d[i] + "</option>");
                });
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus);
            }
        });
        $("[id$='cboState']").attr('style', "background:#ffd1d1; box-shadow: 0 0 20px #ff7a7a; width:64%;");
    }
    else {
        $("[id$='cboState']").val("");
        $("[id$='cboState']").attr('style', "width:5%");
        $("[id$='cboState']").classname ="autotbComplete";

    };
};

function ValidateStateInput() {
    var txt = $('#cboState').val();
    if (CheckUSAorCAN()) {
        if (txt.length > 0) {
            $("[id$='cboState']").attr('style', "width:64%");
            $("[id$='cboState']").classname = "autotbComplete";
        }
        else {
            $("[id$='cboState']").attr('style', "background:#ffd1d1; box-shadow: 0 0 20px #ff7a7a; width:64%;");
        }
    }
    else {
        $("[id$='cboState']").attr('style', "background:#ffd1d1; box-shadow: 0 0 20px #ff7a7a; width:64%;");
    };       
}

function CheckUSAorCAN() {
    var txt = $('#cboCountry').val();
    txt = toAllCaps(txt);
    txt = txt.replace("([^A-Z])+");
    return "US" == txt || "USA" == txt || "UNITEDSTATES" == txt || "CANADA" == txt;
}

function toAllCaps(string) { //jQuery toUpperCase() doesn't work on strings for IE 6-10
    if (string != null) {
        var input = string.split("")
        for (i = 0; i < input.length; i++) {
            input[i] = string.charAt(i).toUpperCase()
        };
        return input.join("")
    }
    return string
};

完成該工作后，我意識到我在后面的代碼中存在問題，特別是在以下函數中，我在其中為元素分配值或從中獲取值。 我可以使用Response.Params從框中獲取值，但是不知道如何分配值或如何從后面的代碼中隱藏/禁用該字段，因為我無法在以下位置執行cboCountry.enabled = false從后面的代碼中選擇一個元素。 如果該元素是ASP.NET DropDownList，則該代碼有效（注意：我從該屬性中刪除了不相關的字段。cbo前綴是應用程序只是使用組合框的WinApp時的剩余值）。 

Private Property InputFieldsControl As CustomerDataFields
    Get
        Dim cdf As New CustomerDataFields       
        cdf.Country = cboCountry.Text
        cdf.State = cboState.Text
        Return cdf
    End Get
    Set(ByVal cdf As CustomerDataFields)

        If Not cboCountry.Items.Contains(New ListItem(cdf.Country)) Then
            cboCountry.Items.Add(cdf.Country)
        End If
        cboCountry.Text = cdf.Country

        If Not cboState.Items.Contains(New ListItem(cdf.State)) Then
            cboState.Items.Add(cdf.State)
        End If
        cboState.Text = cdf.State
    End Set
End Property

由於意識到HTMLSelect元素將無法與我后面的代碼一起使用。 我試圖使相同的網頁和javascript與DropDownLists一起使用，但沒有成功。 從上面更改的代碼如下。 注意這些評論，因為它們是新問題。 具體來說，事件未觸發，並且CheckUSAorCAN（）不斷從cboCountry中檢索所選值的空值。 

<asp:DropDownList Width="66%" CssClass="tbSkin" ID="cboCountry" runat="server" ></asp:DropDownList>
<asp:DropDownList Width="66%" CssClass="tbSkin" ID="cboState" runat="server" ></asp:DropDownList>

<script type="text/javascript">

$(document).ready(function () {       
    $.ajax({
        type: "POST",
        url: "AjaxService.asmx/GetCountryList",
        contentType: "application/json; charset=utf-8",
        data: "{}",
        datatype:"json",
        success: function (data) {
            var d = data.d;
            $(d).each(function (i) {
                var ddlref = document.getElementById("cphContents_InputParams_cboCountry");
               addItem(ddlref,d[i]);
            });

        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert(textStatus);
        }
    });

    $("#cboCountry").bind("change", onCountryChange); //does not bind or fire the event
    $("#cboState").bind("change", onStateChange); //does not bind or fire the event

});


function onCountryChange(e) {
    if (CheckUSAorCAN()) {
        $.ajax({
            type: "POST",
            url: "AjaxService.asmx/GetStateList",
            contentType: "application/json; charset=utf-8",
            data: "{}",
            datatype: "json",
            success: function (data) {
                var d = data.d;
                $(d).each(function (i) {
                    var ddlref = document.getElementById("cphContents_InputParams_cboState");
                    addItem(ddlref, d[i]);
                });
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus);
            }
        });
        $("[id$='cboState']").attr('style', "background:#ffd1d1; box-shadow: 0 0 20px #ff7a7a; width:64%;");
    }
    else {
        $("[id$='cboState']").val("");
        $("[id$='cboState']").attr('style', "width:5%");
        $("[id$='cboState']").classname = "autotbComplete";
    };
};

function onStateChange(e) {
    var txt = $('#cboState').val();
    if (CheckUSAorCAN()) {
        if (txt.length > 0) {
            $("[id$='cboState']").attr('style', "width:64%");
            $("[id$='cboState']").classname = "autotbComplete";
        }
        else {
            $("[id$='cboState']").attr('style', "background:#ffd1d1; box-shadow: 0 0 20px #ff7a7a; width:64%;");
        };
    }
    else {
        $("[id$='cboState']").attr('style', "background:#ffd1d1; box-shadow: 0 0 20px #ff7a7a; width:64%;");
    };
};

function CheckUSAorCAN() {
    var txt = $('#cboCountry').val();
    var e = document.getElementById("cphContents_InputParams_cboState");
    var index = e.selectedIndex; //does not work
    var strUser = e.options[e.selectedIndex]; //does not work

    if (txt != null) { //always comes up null
        txt = toAllCaps(txt);
        txt = txt.replace("([^A-Z])+");
        return "US" == txt || "USA" == txt || "UNITEDSTATES" == txt || "CANADA" == txt;
    }
    return false;
};

function addItem(ddlref, item) {
    var option1 = document.createElement("option");
    option1.text = item;
    option1.value = item;
    ddlref.options.add(option1);
};

因為通過jQuery綁定后change事件沒有觸發，所以將它們綁定在標記代碼中，如下所示： 

<asp:DropDownList Width="66%" CssClass="autoTBComplete" ID="cboCountry" runat="server" onchange="onCountryChange()"></asp:DropDownList>

但是，現在onCountryChange（）確實可以觸發，但是cboCountry中的值作為CheckUSAorCAN（）函數的內容返回為零。

我沒主意了。 我該如何工作？

編輯：如果我在HTMLSelect標記上設置了runat =“ server”，以便可以從后面的代碼訪問它，則它與DropDownList的作用相同，除非我在標記內設置onchange事件，否則該事件將不會觸發。 然后所選值每次都為null，就像DropDownList一樣

1 個解決方案

解決方案1
 0  2014-09-12 14:44:24

終於成功了。 我為jQuery使用類名而不是ID。 這是工作代碼，供將來參考，以及其他來自Google的代碼。

標記： 

<select name="cboCountry" id="cboCountry" class="autoTBComplete cboCountry" runat="server" />
<select id="cboState" name="cboState" class="autoTBComplete cboState" runat="server" />

腳本： 

<script type="text/javascript">

$(document).ready(function () {

    $(".cboCountry").bind("change", ValidateCountryInput);
    $(".cboState").bind("change", ValidateStateInput);

    $.ajax({
        type: "POST",
        url: "AjaxService.asmx/GetCountryList",
        contentType: "application/json; charset=utf-8",
        data: "{}",
        datatype: "json",
        success: function (data) {
            var d = data.d
            $(d).each(function (i) {
                $(".cboCountry").append("<option value=" + d[i] + ">" + d[i] + "</option>");
            });
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert(textStatus);
        }
    });
});

function ValidateCountryInput() {
    if (CheckUSAorCAN()) {
        $.ajax({
            type: "POST",
            url: "AjaxService.asmx/GetStateList",
            contentType: "application/json; charset=utf-8",
            data: "{}",
            datatype: "json",
            success: function (data) {
                var d = data.d
                $(d).each(function (i) {
                    $(".cboState").append("<option value=" + d[i] + ">" + d[i] + "</option>");
                });
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus);
            }
        });
        $(".cboState").attr('style', "background:#ffd1d1; box-shadow: 0 0 20px #ff7a7a; width:64%;");
    }
    else {
        $(".cboState").val("");
        $(".cboState").attr('style', "width:5%");
        $(".cboState").classname = "autotbComplete";

    };
};

function ValidateStateInput() {
    var txt = $('.cboState').val();
    if (CheckUSAorCAN()) {
        if (txt.length > 0) {
            $(".cboState").attr('style', "width:64%");
            $(".cboState").classname = "autotbComplete";
        }
        else {
            $(".cboState").attr('style', "background:#ffd1d1; box-shadow: 0 0 20px #ff7a7a; width:64%;");
        }
    }
    else {
        $(".cboState").attr('style', "background:#ffd1d1; box-shadow: 0 0 20px #ff7a7a; width:64%;");
    };
}

背后的代碼： 

Protected WithEvents cboCountry As Global.System.Web.UI.HtmlControls.HtmlSelect
Protected WithEvents cboState As Global.System.Web.UI.HtmlControls.HtmlSelect


Private Property InputFieldsControl As CustomerDataFields
    Get
        Dim cdf As New CustomerDataFields
        cdf.Country = Request.Params("ctl00$cphContents$InputParams$cboCountry")
        cdf.State = Request.Params("ctl00$cphContents$InputParams$cboState")
        Return cdf
    End Get
    Set(ByVal cdf As CustomerDataFields)

        If Not cboCountry.Items.Contains(New ListItem(cdf.Country)) Then
            cboCountry.Items.Add(cdf.Country)
        End If
        cboCountry.SelectedIndex = GetHTMLSelectIndex(cboCountry, cdf.Country)

        If Not cboState.Items.Contains(New ListItem(cdf.State)) Then
            cboState.Items.Add(cdf.State)
        End If
        cboState.SelectedIndex = GetHTMLSelectIndex(cboState, cdf.State)

    End Set
End Property

Private Function GetHTMLSelectIndex(elem As HtmlSelect, value As String) As Integer
    Return elem.Items().IndexOf(elem.Items.FindByText(value))
End Function

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 使用Javascript在asp.net 4.5中下拉列表選擇的值 使用JavaScript獲取下拉列表asp.net的價值？ jQuery創建的ASP.NET Core 2.1填充下拉列表 如何在asp.net中使用jQuery獲取下拉列表選擇的值綁定？ 如何在JavaScript中將DropdownList Selected值與JavaScript傳遞給Asp.net MVC 4中的Controller？ 如何從javascript訪問asp.net下拉列表選定的項目值 如何獲取DropDownList選定的值，並將其發送到ASP.NET MVC 4中的控制器並使用JavaScript？ 如何使用Javascript從asp.net的下拉列表中獲取選定的值？ ASP.NET JavaScript隱藏和顯示所有下拉列表項 asp.net使用javascript隱藏dropdownlist中的特定項目
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM