Я застрял на этом в течение 2 дней. Первоначально я использовал элементы HTMLSelect и имел успех, пока не понял, что понятия не имею, как присвоить им значение из кода. Здесь был код при использовании HTMLSelect элементов, которые сделали элементы страницы ведут себя так, как я хотел:ASP.NET DropDownList JavaScript/jQuery получение выбранного значения и заселяющих элементов
<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 on элемент выбора из кода позади. Код работает, если элемент является ASP.NET DropDownList (Примечание: я удалил ненужные поля из этого свойства. Префикс cbo остался в стороне от того, когда приложение было просто WinApp, используя comboboxes).
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, я связал их в коде разметки следующим образом:
<asp:DropDownList Width="66%" CssClass="autoTBComplete" ID="cboCountry" runat="server" onchange="onCountryChange()"></asp:DropDownList>
Однако теперь onCountryChange() делает огонь, но значение в cboCountry возвращается как ничто для функции CheckUSAorCAN().
У меня нет идей. Как это сделать?
EDIT: Если я устанавливаю runat = "server" на разметку HTMLSelect, чтобы получить доступ к нему из кода позади, он делает то же самое, что и DropDownList, где событие не срабатывает, если я не установил событие onchange внутри разметки. Тогда выбранное значение равно нулю каждый раз, точно так же, как и для DropDownList