Topic: Multiselect values
$('.mdb-select').change(function () {
var values = $(this).val();
console.log(values);
});
However, this doesn't work because, for some reason, it runs twice and has no values the second time. I tested this by substituting 'alert(values);' for the 'console.log(values);' line. The alert box opens twice - the first time it has the correct values, the second time it's empty.
If I create 'values' as a global variable and assign $(this).val(); to that global variable, and then later try to check 'values', it will be empty even though I checked options in the multiselect.
Please review and advise.
We are very sorry but we have a bug in material select. We have a fix for you! We will fix it globally in next release. This fix is easy and fast.
You need to find your material-selecjt.js file.
Next, you need to go to 160 line in material select.
Change icon_url to iconUrl !
It should look like that :
if (iconUrl) {
var classString = '';
if (classes) {
classString = ' class="' + classes + '"';
}
if (type === 'multiple') {
options.append($('<li class="' + disabledClass + '"><img alt="" src="' + iconUrl + '"' + classString + '><span class="filtrable"><input class="form-check-input" type="checkbox"' + disabledClass + '/><label></label>' + option.html() + '</span></li>'));
} else {
options.append($('<li class="' + disabledClass + optgroupClass + '"><img alt="" src="' + iconUrl + '"' + classString + '><span class="filtrable">' + option.html() + '</span></li>'));
}</code> We are very sorry again about that bug.
Best,
Piotr
Piotr Glejzer staff commented 6 years ago
Hi, if you click second time on the same value is showing nothing cause you unchecked that value so it's empty. If you click on different value all the time is showing correct value. Do you need something what take val for first time and keep it if even unchecked this? Best, Piotr
- I have a multiselect element and call .material-select()
- I created a '$(".mdb-select").on("change", function() { alert($(this).val()); });' event for the multiselect
- I click an option only ONCE - that triggers the "change" event
- An alert popup shows - with the correct selected value
- I click the alert 'Ok' button to close that alert popupIMME
- IMMEDIATELY after that alert closes, another alert popup shows, this time with an empty box - no value
- I don't select any more options, just the initial one I selected
- I have another button that, when clicked, gets the '.val()' from the mdb-select element (using '$(".mdb-select").val()'). When I click that button, my returned value is blank, even though the element in the DOM correctly shows my selected option in the input area.
Piotr Glejzer staff commented 6 years ago
Yes I understand that. I checked that code what did you create and in my code it happens as follows: - I click on example select and I have a alert meesage with value for exmaple 1 - If i clicked on second option I have value from that option and 1st. - I don't have any more unexpected popup alerts if i close first alert or any more alerts. Can you show me your all code ?
var values = $(this).val(); console.log(values); });That answer uses a class (mdb-select) to access the <select> element and get its value. If I just add an alert function right before 'console.log' statement (ie, alert($(this).val());) in the code above, the alert box will open twice, which it should not do. However, if I then change $('.mdb-select').change(...) to an id, like $('#mdbTest').change(...), then the alert popup will only fire once (correctly), and the .val() will be correct, if I use the 'id' to access .val() again. So, your support answer to access the <select> value did not explain that you need to use an 'id' selector, because a class will not work. Please review this. Thanks!
Piotr Glejzer staff commented 6 years ago
We will think about that. Thank you very much for your answer. If you will put your function
$(‘.mdb-select’).on(‘change’, function() {
alert($(‘.mdb-select’).val());
});
below the main function what initiate material select. This is working fine and you will not have that second empty popup. It temporary solution, I think.
this is for multi select, i don't know why this is product for commercial using but there are many mis-document in online-document IN THIS WEB., I am customer @@1. html
/*<select id="task_dtl_SelectAddUser" ............ */
$("#task_dtl_SelectAddUser").change(function() {
var varArrSelectedList = $(this).find(":selected");
if (varArrSelectedList.length > 1) {
$.each(varArrSelectedList, function(index, value) {
// ignore first item (this disable title item)
if (index == 0) {
return;
}
});
}
}).trigger("change");
2020.06... work well
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No