Hi, in this code sample, I would like to share some common functions to manipulate Choices columns (Multiselect OptionSets) using JavaScript/jQuery:
function GetChoicesValue(fieldName) {
var choicesField = $("#" + fieldName + "_Container");
var selectedValues = [];
choicesField.find('.msos-selected-display-item').each(function () {
selectedValues.push($(this).data('value'));
});
console.log(selectedValues);
return selectedValues;
};
function SetChoicesValues(fieldName, valuesToSelect, clearSelectedChoices) {
var choicesField = $("#" + fieldName + "_Container");
if (!valuesToSelect || !valuesToSelect.length) {
return;
}
if (!!clearSelectedChoices) {
ClearChoicesValues(fieldName)
}
valuesToSelect.forEach(function (item) {
var valuesSelected = GetChoicesValue(fieldName);
if (!!valuesSelected && valuesSelected.indexOf(item) == -1) {
var checkboxDataItem = choicesField.find("li>>input.msos-checkbox[value='" + item + "']");
if (!!checkboxDataItem) {
checkboxDataItem.click();
}
}
});
};
function ClearChoicesValues(fieldName) {
var choicesField = $("#" + fieldName + "_Container");
var checkboxDataItem = choicesField.find("li>>input.msos-checkbox");
if (!!checkboxDataItem) {
checkboxDataItem.trigger('change', false);
}
};
function SelectAllChoicesValues(fieldName) {
var choicesField = $("#" + fieldName + "_Container");
var checkboxDataItem = choicesField.find("li>>input.msos-checkbox");
if (!!checkboxDataItem) {
checkboxDataItem.trigger('change', true);
}
};
To test the functions above, all you need to do is all the functions by passing your column name as parameter:
GetChoicesValue("cr285_choices");
SetChoicesValues("cr285_choices",[4,5],false);
SetChoicesValues("cr285_choices",[4,5],true);
ClearChoicesValues("cr285_choices");
SelectAllChoicesValues("cr285_choices");