| Level | Categories |
|---|---|
| 1 | 1A, 1F |
| 2 | 2B, 2C |
| 3 | 3F |
In my form, there are 2 cascading dropdowns. Level is single select and Categories is multi select. I am trying to figure out how to change Level to multi select.
The Categories dropdown options should be based on the selection in Level field, example: Level selected are:1,2 The Categories dropdown options should be: 1A, 1F, 2B, 2C
After the user has selected the values for both fields, example: Level selected are: 1,2 Categories selected are: 1A, 2C
When Level 1 is removed from the Level field, Categories field should automatically update to remove the selected 1A, example: Level selected are: 2 Categories selected are: 2C The Categories dropdown options should be: 2B, 2C
Current code:
<div class="col-lg-3">
<div class="form-group">
<label>Level</label>
<select class="form-control select2" id="level" multiple></select>
</div>
</div>
<div class="col-lg-3">
<div class="form-group">
<label>Categories</label>
<select class="form-control select2" id="categories" multiple></select>
</div>
</div>
$('[id*="level"]').on('change', function()
{
$('#categories').empty();
var levelID= $('[id*="level"]').val();
LoadCategoriesOptions(levelID);
});
function LoadLevelOptions()
{
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Level')/items?$select=ID,Title&$orderby= Title asc",
headers: {
Accept: "application/json;odata=verbose"
},
async: false,
success: function(data) {
if (data.d.results.length > 0)
{
$('[id*="level"]').append($("<option></option>").attr("value", 0).text(""));
for (var i = 0; i < data.d.results.length; i++)
{
var item = data.d.results[i];
$('[id*="level"]').append($("<option></option>").attr("value", item .ID).text(item.Title));
}
}
},
error: function(data) {
console.log("Error");
}
});
}
function LoadCategoriesOptions(levelID)
{
if(levelID)
{
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Level')/items?$select=ID,Title,Categories/ID,Categories/Title&$expand=Categories&$filter=ID eq " + encodeURIComponent("'" + levelID + "'"),
headers: {
Accept: "application/json;odata=verbose"
},
async: false,
success: function(data) {
if (data.d.results.length > 0)
{
var item = data.d.results[0];
var newList = item.Categories["results"];
newList.sort(function(a, b) {
var t1 = a.Title.toUpperCase();
var t2 = b.Title.toUpperCase();
return (t1 < t2 ) ? -1 : (t1 > t2 ) ? 1 : 0;
});
for(var i = 0; i < newList.length; i++)
{
var result = newList[i];
$('#categories').append($("<option></option>").attr("value", result.ID).text(result.Title));
}
}
},
error: function(data) {
console.log("Error");
}
});
}
}
