ASP.NET DropDownList JavaScript/jQuery获取选定值并填充项
我已经在这上面呆了两天了。我最初使用HTMLSelect元素,并取得了成功,直到我意识到我不知道如何从后面的代码中为它们赋值。下面是使用HTMLSelect元素时的代码,这些元素使页面元素按照我想要的方式运行:ASP.NET DropDownList JavaScript/jQuery获取选定值并填充项,javascript,jquery,html,asp.net,vb.net,Javascript,Jquery,Html,Asp.net,Vb.net,我已经在这上面呆了两天了。我最初使用HTMLSelect元素,并取得了成功,直到我意识到我不知道如何从后面的代码中为它们赋值。下面是使用HTMLSelect元素时的代码,这些元素使页面元素按照我想要的方式运行: <select id="cboCountry" class="autoTBComplete"/> <select id="cboState" class="autoTBComplete" /> <script type="text/javascript"&
<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
};
因为意识到HTMLSelect元素不能与我的代码一起工作。我试图让相同的网页和javascript与DropDownlist一起工作,但没有成功。从上面更改的代码如下所示。注意这些评论,因为这些都是新问题。具体来说,事件不触发和checkUSAORC可以不断从CBOContry检索所选值的空值
<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绑定后不会触发更改事件,所以我在标记代码中绑定了它们,如下所示:
<asp:DropDownList Width="66%" CssClass="autoTBComplete" ID="cboCountry" runat="server" onchange="onCountryChange()"></asp:DropDownList>
但是,现在onCountryChange确实启动了,但是对于CheckUSAorCAN函数,CBOContry中的值返回为nothing
我没有主意了。我该怎么做
编辑:如果我在HTMLSelect标记上设置runat=server,以便可以从后面的代码中访问它,那么它会执行与DropDownList相同的操作,在DropDownList中不会触发事件,除非我在标记中设置onchange事件。然后每次选择的值都是null,就像DropDownList的值一样最终使其工作。对于jQuery,我使用了classname而不是ID。以下是工作代码,供将来参考,其他代码来自谷歌 标记:
<select name="cboCountry" id="cboCountry" class="autoTBComplete cboCountry" runat="server" />
<select id="cboState" name="cboState" class="autoTBComplete cboState" runat="server" />
<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