Filter Lookup Multi-Select on previous selection
Pregunta
I have a Lookup Column called Region, and a second lookup column of type multi-select called Customer.
I want to filter Customers column based on Regions selection. I found SPServices allows to cascade dropdown but since it is a multi-select how can I do that?
Solución
You can check the code below for your reference:
// (Newform.aspx, EditForm.aspx, or any other customized form.)
$.fn.SPServices.SPCascadeMultiSelect = function(options) {
var opt = $.extend({}, {
relationshipWebURL: "", // [Optional] The name of the Web (site) which contains the relationships list
relationshipList: "", // The name of the list which contains the parent/child relationships
relationshipListParentColumn: "", // The name of the parent column in the relationship list
relationshipListChildColumn: "", // The name of the child column in the relationship list
parentColumn: "", // The name of the parent column in the form
childColumn: "" // The name of the child column in the form
}, options);
// Find the child column's multi-select possible values container
var childSelectCtr = $().find("select:[Title='" + opt.childColumn + " possible values']");
// Find the parent column's multi-select possible values container
var parentSelectCtr = $().find("select:[Title='" + opt.parentColumn + " possible values']");
// Find the child column's multi-select selected values container
var childSelectedCtr = $().find("select:[Title='" + opt.childColumn + " selected values']");
// Find the parent column's multi-select selected values container
var parentSelectedCtr = $().find("select:[Title='" + opt.parentColumn + " selected values']");
// Find the parent column's multi-select add button
var parentAddButton = parentSelectedCtr.parent().parent().parent().find("button:[id$=AddButton]");
// Find the parent column's multi-select remove button
var parentRemoveButton = parentSelectedCtr.parent().parent().parent().find("button:[id$=RemoveButton]");
// Find the child column's multi-select remove button
var childRemoveButton = childSelectedCtr.parent().parent().parent().find("button:[id$=RemoveButton]");
var queryHead = null;
var queryTail = null;
var query = null;
var buttonType = null;//1 for add button, 2 for remove button
parentAddButton.bind("click", function(){
//alert(parentSelectedCtr.find("option").size());
if(parentSelectedCtr.find("option").size()>1){
queryHead = "";
queryTail = ""
}
else{
queryHead = "";
queryTail = "";
}
query = queryHead;
parentSelectedCtr.find("option").each(function(){
//alert($(this).text());
var parentSelectedValue = $(this).text();
query = query + "" + parentSelectedValue + "";
});
query = query + queryTail;
//alert(query);
buttonType = 1;
handleMultiSelect(childSelectCtr, childSelectedCtr, query, buttonType, opt);
});
parentRemoveButton.bind("click", function(){
//alert(parentSelectCtr.find("option").size());
if(parentSelectCtr.find("option").size()>1){
queryHead = "";
queryTail = ""
}
else{
queryHead = "";
queryTail = "";
}
query = queryHead;
parentSelectCtr.find("option").each(function(){
//alert($(this).text());
var parentSelectedValue = $(this).text();
query = query + "" + parentSelectedValue + "";
});
query = query + queryTail;
//alert(query);
buttonType = 2;
handleMultiSelect(childSelectCtr, childSelectedCtr, query, buttonType, opt);
});
childRemoveButton.bind("click", function(){
//alert(parentSelectCtr.find("option").size());
if(parentSelectCtr.find("option").size()>1){
queryHead = "";
queryTail = ""
}
else{
queryHead = "";
queryTail = "";
}
query = queryHead;
parentSelectCtr.find("option").each(function(){
//alert($(this).text());
var parentSelectedValue = $(this).text();
query = query + "" + parentSelectedValue + "";
});
query = query + queryTail;
//alert(query);
buttonType = 2;
handleMultiSelect(childSelectCtr, childSelectedCtr, query, buttonType, opt);
});
if(parentSelectedCtr.find("option").html() == null){
if (childSelectCtr.find("option").html() != null) {
childSelectCtr.find("option").each(function() {
$(this).remove();
childSelectCtr.trigger("change");
});
}
}
else{
childRemoveButton.trigger("click");
}
}
function handleMultiSelect(childSelectCtr, childSelectedCtr, query, buttonType, opt){
$().SPServices({
operation: "GetListItems",
// Force sync so that we have the right values for the child column onchange trigger
async: false,
webURL: opt.relationshipWebURL,
listName: opt.relationshipList,
// Filter based on the currently selected parent column's value
CAMLQuery: query,
// Only get the parent and child columns
CAMLViewFields: "",
// Override the default view rowlimit and get all appropriate rows
// Took out node because it was causing the CAML query to return duplicate rows
CAMLRowLimit: "",
completefunc: function(xData, Status){
$(xData.responseXML).find("z\\:row").each(function(){
if(buttonType == 1){
//Build the option
var optionToAdd = "" + $(this).attr("ows_" + opt.relationshipListChildColumn) + "";
//Add the option to the select list
if ((childSelectedCtr.find("option[value='" + $(this).attr("ows_ID") + "']").val() == undefined) && (childSelectCtr.find("option[value='" + $(this).attr("ows_ID") + "']").val() == undefined)) {
childSelectCtr.append(optionToAdd);
}
}
if(buttonType == 2){
if(childSelectedCtr.find("option[value='" + $(this).attr("ows_ID") + "']").val() != undefined) {
childSelectedCtr.find("option[value='" + $(this).attr("ows_ID") + "']").remove();
}
if(childSelectCtr.find("option[value='" + $(this).attr("ows_ID") + "']").val() != undefined){
childSelectCtr.find("option[value='" + $(this).attr("ows_ID") + "']").remove();
}
}
});
}
});
}
More information: similar post about Cascade dropdown for multi select lookup fields
Licenciado bajo: CC-BY-SA con atribución
No afiliado a sharepoint.stackexchange