Topic: How to show all selected options in Multiselect
kennychiu0223 pro asked 6 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 6 years ago
- Bind the
change
event 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'value
attributes. - 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 6 years ago
Sebastian Kaczmarek staff answered 6 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