I am working on a plugin and trying to add a multi select dropdown to the settings page in the ACP. I can select multiple values, hit save and the values are getting saved in the database and I can retrieve them back from the db. If I go to the settings page again after saving, the dropdown UI doesn't reflect the options selected based on the values in the db. Any help?
How are you handling the saving code? We recommend using v2 of the admin settings module:
<script>
require(['settings'], function(Settings) {
Settings.load('quickstart', $('.quickstart-settings'));
$('#save').on('click', function() {
Settings.save('quickstart', $('.quickstart-settings'), function() {
app.alert({
type: 'success',
alert_id: 'quickstart-saved',
title: 'Settings Saved',
message: 'Please reload your NodeBB to apply these settings',
clickfn: function() {
socket.emit('admin.reload');
}
})
});
});
});
</script>
The code there should handle selects properly.
@julian I am using the same exact code. Regular select works fine. The problem is with selects with multiple option.
If I make the select multiple and just pick one option, then I can see the option selected when I come back to the settings page later. If I pick 2 or more and then come back to the page, there is no indication on the UI of which options were selected.
Any help? This is the only thing stopping me from finishing the plugin.
I reported here please keep in touch for updates 
Thanks @psychobunny
<div class="form-group col-xs-12">
<label for="categories">Category</label>
<select multiple class="form-control" name="categories" title="Categories">
<option value="">Select a category</option>
<option value="1">Announcements</option>
<option value="2">General Discussion</option>
<option value="4">Comments & Feedback</option>
<option value="3">Blogs</option>
</select>
</div>
This plugin works for me:
Settings.registerPlugin({
Settings: {},
types: ['selectMultiple'],
use: function () {
Settings = this;
},
set: function (element, value) {
if (value.constructor === Array) {
for (var val in value) {
element.find('option[value=val]').attr("selected",true);
}
}
},
get: function (element, trim, empty) {
var value = [];
element.find('option:selected').each(function () {
value.push($(this).val());
});
return value;
}
});
With data-type="selectMultiple" added to the select tag.
Oh, @pichalite, something to consider -- the values as saved are now JSON in the database, not comma separated (that was just the default behaviour of .toString()).
So the multiselect should save data as ['foo', 'bar', 'baz']
You may need to clear cache?
https://github.com/NodeBB/NodeBB/commit/d096a639d6d51c02b71c243dc8b1b29f94a73007
