问题描述
我想互相下拉列表,因为我必须将一个选定值(ID)传递给另一个下拉列表。我正在使用Web服务绑定下拉列表,并且已成功完成但无法相互投射。我尝试过这样,但是选择0时我在创建下拉列表时已通过硬编码
var o = { countrycode: $('#ddlCountry').val(),CompanyCode: '1000'};
我正在使用jQuery,并希望将一个下拉列表值传递给另一种Web方法,因此它基于第一个下拉列表进行绑定,但是我无法选择选定的下拉列表值,为什么?
jQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: "POST",url: "Header.aspx/GetCountriesName",dataType: "json",contentType: "application/json",success: function (res) {
$.each(res.d,function (data,value) {
$("#ddlCountry").append($("<option></option>").val(value.CountryId).html(value.CountryName));
});
}
});
$('#ddlCountry').change(function (e) {
BindCompanies();
});
});
function BindCompanies() {
var CompCode = $('#ddlCountry').val();
var CountryCode = '1000';
$.ajax({
type: "POST",data: JSON.stringify(CompCode,CountryCode),url: "Header.aspx/GetCompanies",value) {
$("#ddlCompany").append($("<option></option>").val(value.CompanyId).html(value.CompanyName));
});
}
});
}
</script>
DropDown:
<select id="ddlCountry">
<option value="0">--Select Country--</option>
</select>
<select id="ddlCompany">
<option value="0">--Select Company--</option>
</select>
<select id="ddlDevision">
<option value="0">--Select Devision--</option>
</select>
WebMethod:(There i want to pass selected Countrycode and Companycode)
[WebMethod]
public static List<Company> Getcompanies(string Countrycode,string Companycode)
{
GetinitiatorList.MasterDataServiceClient oClient = new GetinitiatorList.MasterDataServiceClient();
Almarai.GiveAway.GetinitiatorList.ALM_COMPANY_M[] initiatorslist = oClient.GetCompanies(Countrycode,Companycode);
//almarai.giveaway.getinitiatorlist.alm_company_m[] companymlist = initiatorslist.companies;
List<Company> companyes = new List<Company>();
foreach (Almarai.GiveAway.GetinitiatorList.ALM_COMPANY_M company in initiatorslist)
{
companyes.Add(new Company()
{
CompanyCode = company.CompanyCode,CompanyName = company.CompanyName
});
}
return companyes;
}
我在哪里做错了,请引导我
解决方法
作为一般指标,您需要确保只订阅一次下拉列表的change
事件。目前,您正在为ddlCountry
的一次更改事件订阅一次第一个ajax调用中返回的每个单个项目
$.each(res.d,function (data,value) {
$("#ddlCountry").append($("<option></option>").val(value.CountryId).html(value.CountryName));
$('#ddlCountry').change(function (e) { // don't do this!
您的代码应该这样布置(用伪代码):
inside document ready:
subscribe change on ddlCountry:
execute function to load ddlCompany
subscribe change on ddlCompany:
execute function to load ddlDivision
execute initial ajax call to load ddlCountry
function for loading ddlCompany using ajax
function for loading ddlDivision using ajax
下面的示例演示了如何在更改下拉列表时读取动态添加的option
的选定值。
var $country = $('#ddlCountry');
$country.on('change',function(){
console.log($(this).val());
});
$country.append($('<option></option>').val(1).html("First"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="ddlCountry">
<option value="0">--Select Country--</option>
</select>