我有2个级联下拉列表。添加时，我会根据使用Dataevents的第一个下拉选项填充第二个下拉列表。 如何在编辑表单时绑定第二个下拉列表的值？ 请帮我。
<script type="text/javascript">
var buildSelectFromJson = function (data) {
var html = '<select><option value="">--- Select ---</option>', d = data.d, length = d.length, i = 0, item;
for (; i < length; i++) {
item = d[i];
html += '<option value="' + item.id + '">' + item.value + '</option>';
}
html += '</select>';
return html;
};
var values = ":--- Select ---";
var setTowers = function (buid) {
$.ajax({
type: "POST",
url: "AdminDropDown.asmx/selectTowersbyBUs",
//data: '{name: "abc" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
data: '{"buid":' + buid + '}',
ajaxOptions: { contentType: 'application/json; charset=utf-8' },
contentType: "application/json; charset=utf-8",
serializeData: function (postData) {
// serialize the parameters as JSON string
return JSON.stringify(postData);
},
success: function (data) {
var newOptions = '<option role="option" value="">--- Select ---</option>';
$.each(data.d, function (key, value) {
newOptions += '<option role="option" value="' + value.id + '">' +
value.value + '</option>';
});
var form = $('#BUId').closest('form.FormGrid');
$("select#TowerId.FormElement", form[0]).html(newOptions);
},
failure: function () {
alert("Failed loading Towers!");
}
});
}
function loadGrid() {
$("#jqGrid").jqGrid({
url: 'UserCreation.aspx/GetUserAccess',
datatype: 'json',
mtype: 'POST',
colNames: ["Access Id", "BU id", "Business Unit", "Tower Id", "Tower", "ProcessId", "Process", "UserRoleId", "User Role"],
colModel: [
{ name: 'AccessId', index: 'AccessId', jsonmap: 'AccessId', hidden: true },
{
name: 'BUId', index: 'BUId', jsonmap: 'BUId', hidden: true, editable: true, edittype: 'select', editoptions: {
dataUrl: 'AdminDropDown.asmx/selectBusinessUnits',
buildSelect: buildSelectFromJson,
dataEvents: [{
type: 'change',
fn: function (e) {
//resetTowersValues();
var buid = $(e.target).val();
alert(buid);
setTowers(buid);
}
}]
}, editrules: { required: true, edithidden: true }, formoptions: { label: 'Business Unit' }
},
{ name: 'BUName', index: 'BUName', jsonmap: 'BUName' },
{
name: 'TowerId', index: 'TowerId', jsonmap: 'TowerId', hidden: true, editable: true, edittype: 'select',
editoptions: {
value: values,
dataEvents: [{
type: 'change',
fn: function (e) {
//resetTowersValues();
var buid = $('#BUId').val();
var towerid = $(e.target).val();
//setTowers(buid);
$.ajax({
type: "POST",
url: "AdminDropDown.asmx/selectProcessbyTowersBUs",
//data: '{name: "abc" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
data: '{"buid":' + buid + ',"towerid":' + towerid + '}',
ajaxOptions: { contentType: 'application/json; charset=utf-8' },
contentType: "application/json; charset=utf-8",
serializeData: function (postData) {
// serialize the parameters as JSON string
return JSON.stringify(postData);
},
success: function (data) {
var newOptions = '<option role="option" value="">--- Select ---</option>';
$.each(data.d, function (key, value) {
newOptions += '<option role="option" value="' + value.id + '">' +
value.value + '</option>';
});
var form = $(e.target).closest('form.FormGrid');
$("select#ProcessId.FormElement", form[0]).html(newOptions);
},
failure: function () {
alert("Failed loading Process!");
}
});
}
}]
},
editrules: { required: true, edithidden: true }, formoptions: { label: 'Tower' }
},
{ name: 'TowerName', index: 'TowerName', jsonmap: 'TowerName' },
{
name: 'ProcessId', index: 'ProcessId', jsonmap: 'ProcessId', hidden: true, editable: true, edittype: 'select', editoptions: {
value: values
//dataUrl: 'AdminDropDown.asmx/selectProcess',
//buildSelect: buildSelectFromJson
}, editrules: { required: true, edithidden: true }, formoptions: { label: 'Process' }
},
{ name: 'PreocessName', index: 'PreocessName', jsonmap: 'PreocessName' },
{
name: 'UserRoleId', index: 'UserRoleId', jsonmap: 'UserRoleId', hidden: true, editable: true, edittype: 'select', editoptions: {
dataUrl: 'AdminDropDown.asmx/selectUserRoles',
buildSelect: buildSelectFromJson
}, editrules: { required: true, edithidden: true }, formoptions: { label: 'User Role' }
},
{
name: 'UserRoleName', index: 'UserRoleName', jsonmap: 'UserRoleName', width: 150,
}
],
ajaxSelectOptions: { contentType: "application/json", dataType: 'json', type: "POST" },
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
contentType: "application/json; charset=utf-8",
serializeGridData: function (postData) {
return JSON.stringify($.extend(true,{},postData, {
userid: $('#huserid').val()
}));
},
caption: "User Access Information",
viewrecords: true,
gridview: true,
autoencode: true,
//loadonce: true,
loadError: function (xhr, st, err) {
alert("Type: " + st + "; Response: " + xhr.status + " " + xhr.statusText + err);
},
jsonReader: {
root: function (obj) { return obj.d; }, //array containing actual data
page: function (obj) { return 1; },
total: function (obj) { return obj.d.length / 25; },
records: function (obj) { return obj.d.length; }, //total number of records
repeatitems: false,
id: 'AccessId',
cell: '',
},
rownumbers: true,
autowidth: true,
height: 250,
rowNum: 25,
rowList: [25, 50, 100],
pager: "#jqGridPager",
}).navGrid('#jqGridPager', { edit: true, add: true, del: true, view: true }, // Edit options
{
autowidth: true,
savekey: [true, 13],
reloadAfterSubmit: true,
jqModal: false,
closeOnEscape: true,
closeAfterEdit: true,
url: 'UserCreation.aspx/UpdateUserAccess',
datatype: 'json',
mtype: 'POST',
ajaxEditOptions: { contentType: 'application/json; charset=utf-8' },
contentType: "application/json; charset=utf-8",
serializeEditData: function (postData) {
//alert(postData.formVars);
// serialize the parameters as JSON string
return JSON.stringify(postData);
},
//onClickSubmit:function(
afterSubmit: function (response, postdata) {
var res = $.parseJSON(response.responseText);
alert(postdata.id + ' updated successfully');
return [true, response.responseText, '']
}
},
{
savekey: [true, 13],
reloadAfterSubmit: true,
jqModal: false,
closeOnEscape: true,
closeAfterAdd: true,
url: 'UserCreation.aspx/UpdateUserAccess',
datatype: 'json',
mtype: 'POST',
ajaxEditOptions: { contentType: 'application/json; charset=utf-8' },
contentType: "application/json; charset=utf-8",
serializeEditData: function (postData) {
// serialize the parameters as JSON string
return JSON.stringify($.extend(true, {}, postData, {
userid: $('#huserid').val()
}));
//return JSON.stringify(postData);
},
},
{
savekey: [true, 13],
reloadAfterSubmit: true,
jqModal: false,
closeOnEscape: true,
closeAfterDelete: true,
url: 'UserCreation.aspx/DeleteUserAccess',
datatype: 'json',
mtype: 'POST',
ajaxDelOptions: { contentType: 'application/json; charset=utf-8' },
contentType: "application/json; charset=utf-8",
serializeDelData: function (postData) {
delete postData.oper;
return JSON.stringify(postData);
},
afterSubmit: function (response, postdata) {
var res = $.parseJSON(response.responseText);
alert(postdata.id + ' ' + res.d);
return [true, res.d];
}
});
}
</script>