我们有一个用户信息表格,其中包括用户的地址国家/地区(dropdownlist1),用户的电话号码国家/地区(dropdownlist2)和传真号码国家/地区(dropdownlist3)。我们希望更新表单,以便当用户选择其地址国家/地区(1)时,其他两个国家/地区下拉列表(2& 3)将更新到第一个列表的所选国家/地区。
我们的网站是C#MVC网站。
表单上的现有代码(来自我们的实施合作伙伴)使用脚本来更新字段(它没有成功 - 它们只是空白)。
在视图cshtml文件中:
$(function () {
$('#Country').change(function () {
var $country = $(this);
var country = $country.val();
var selectedValues = new Array();
selectedValues[0] = country;
selectedValues[1] = country;
$('#PhoneCountry').val(selectedValues);
$('#FaxCountry').val(selectedValues);
});
});
我知道脚本本身就会运行 - 我已经删除了一些其他组件以简化脚本来提出这个问题,这些部分按预期工作。
我们遇到的挑战之一是第一个下拉列表,对于地址国家/地区,其国家/地区名称包含值和文本,而电话和传真下拉列表使用GUID作为值,将国家/地区作为文本。尽管我可以说,我们需要使用SelectedText值来尝试更改两个电话下拉列表,但我无法找到使其工作的代码。
我尝试过排列,包括
var selectedText = country;
$('#PhoneCountry')SelectedText(selectedText);
和
var selectedText = country;
$('#PhoneCountry')VAL(selectedText);
失败了。
我甚至将各种选项硬编码到脚本中,只是想弄清楚哪些信息组合成功更新了两个电话下拉列表,但即使这样也失败了。
非常感谢任何建议/意见!
答案 0 :(得分:0)
这里只是一个例子。你可以根据你的项目修改它。使用jquery。
$('#dropdownstate').change(function () {
var collectoinPointUrl = ROOT + "Controllername/actionmethod"
var StateId = $('#dropdownstate').val();
$.ajax({
url: collectoinPointUrl,
data: { StateId: StateId },
dataType: "json",
traditional: true,
success: function (result) {
$('#dropdowncompany').empty();
$('#dropdowncompany').append("<option value=''>--Select--</option>");
$.each(result.CompanyList, function (key, value) {
$('#dropdowncompany').append($("<option></option>").val(value.Value).html(value.Text));
});
}
});
});
所以在这里更改状态下拉列表获取所选值。将该值发送到控制器以获取相应的公司值。从控制器返回conpanylist。然后将其附加到公司的dropdrown列表中。希望这会有所帮助。
答案 1 :(得分:0)
我使用了@Tonmoy Saha提出的建议,但无法让它工作 - 很可能是我自己的错(C#的新手)。由于数据库导入要求,第一个下拉列表必须提交值作为国家/地区代码(名称),并且两个电话下拉列表必须作为GUID提交。
所以我的解决方案是在表单中添加一个隐藏字段来接受文本值,然后使用控制器中的更新脚本使用原始下拉字段中的拆分文本值更新该字段。我使用隐藏字段然后更新控制器并提交给该提交的数据库。
所以代码更新看起来像:
$(function () {
$('#Country').change(function () {
var $country = $(this);
var country = $country.val();
var country = $("#Country option:selected").text();
var countryguid = $country.val();
if (country == '') {
$('#states-container').html('');
return;
}
$('#PhoneCountry').val(countryguid);
$('#FaxCountry').val(countryguid);
$('#AddressCountry').val(country)