Topic: How to show all selected options in Multiselect
kennychiu0223
pro
asked 7 years ago
<select multiple='multiple' class='mdb-select colorful-select dropdown-primary' name='students[]' id='form_widget_students' data-value='1,2,3,4,5,6,7,8,9,10' searchable='Search here..'> <option value='' disabled > --- </option> <option value='1' selected>Student A</option> <option value='2' selected>Student B</option> <option value='3' selected>Student C</option> <option value='4' selected>Student D</option> <option value='4' selected>Student D</option> ... <option value='50'>Student XX</option> </select>mdbootstrap multiselect
Sebastian Kaczmarek
staff
answered 7 years ago
- Bind the
changeevent and use.val()method to get the array of selected values, e.x:$('#studentsSelect').on('change', function() { var values = $(this).val(); // do whatever you want with 'values' });This method gives you an array of values which are set in the options'valueattributes. - In case you want to get the array of values which are visible to the user. Use this approach:
$('#studentsSelect').on('change', function() { var values = []; var $selectedOptions = $(this).find('option:selected'); $selectedOptions.each(function(){ values.push($(this).text()); }); // do whatever you want with 'values' });This way, you get the array of texts which are set to the options.
<select multiple>
<option value="student_a">Student A</option>
<option value="student_b">Student B</option>
<option value="student_c">Student C</option>
</select>
Then when you will go with the 1. approach, you will get ["student_a", "student_b", "student_c"], 2. approach however, will give you ["Student A", "Student B", "Student C"]. Pick one and do the rest ;)
kennychiu0223
pro
answered 7 years ago
Sebastian Kaczmarek
staff
answered 7 years ago
material-select.js file, the method called _setValueToMaterialSelect(). Then, change this condition:
if (itemsCount >= 5) {
value = `${itemsCount} options selected`;
} else {
value = value.substring(2);
}
To something like this:
value = value.substring(2);(simply get rid of the condition and leave only the content of
else block).
Then you will have to recompile and re-minify the package to have it in your mdb.min.js file. You can also do exact the same thing directly in your mdb.js and then re-minify the file to have it in the mdb.min.js file.
Anyway, if I were you, I would consider not to do it at all and leave it as it is. Simply because of UI/UX reasons. But that's only my suggestion. I don't know what exactly are you doing.
Hope it helps
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.5.9
- Device: Desktop
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes