Multiselect values

Topic: Multiselect values

dmpneuro premium asked 5 years ago

I saw in your support forum that to get the values of a multiselect, you use this event handler:

$('.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.

Add comment

Vinh Lam free answered 3 years ago

0 0 Best answer

Please insert min. 20 characters.

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

Add comment

dmpneuro premium answered 5 years ago

0 0 Best answer

I think I found the problem.

Assume the following code (I started with your index.html that comes with MDB-Bootstrap, and just substituted the select tag and the added the javascript):

<div>
<div>                <select id="test" class="mdb-select colorful-select dropdown-primary mt-5" multiple searchable="Search here.."></div>
<div>                        <option value="" disabled selected>Choose your country</option></div>
<div>                        <option value="1">USA</option></div>
<div>                        <option value="2">Germany</option></div>
<div>                        <option value="3">France</option></div>
<div>                        <option value="4">Poland</option></div>
<div>                        <option value="5">Japan</option></div>
<div>                </select></div>
<div>                <label>Label example</label></div>
<div>                <button class="btn-save btn btn-primary btn-sm">Save</button></div>
</div>
<div><script></div>
<div>
<div>
<div>        $(document).ready(function() {</div>
<div>             $('.mdb-select').material_select();</div>
<div>             $('.mdb-select').on('change', function() {</div>
<div>                alert($('.mdb-select').val());</div>
<div>             });</div>
<div>        });</div>
<div></script></div>
</div>
</div>
<div></div>
<div>The code above will fail. The reason is that I ran '.val()' on a class identifier and not an id. However, in the example above, if I change the alert code to:</div>
<div></div>
<div>    alert($('#test').val());</div>
<div></div>
<div>I will get the correct value. So, even later on, if I want to get the 'select' value(s), I have to access the <select> element with an 'id', not a class.</div>
<div>Normally, it shouldn't matter whether I use an id versus a class as a selector, but with your code it does matter.</div>
<div></div>
<div>The problem is, your support team answered another user (https://mdbootstrap.com/support/multiselect-values-nice-ui-horrible-deployment-for-devs/) with the following code as a method of getting the <select> value:</div>
<div></div>
<div><span style="font-family: Consolas, Monaco, monospace">$('.mdb-select').change(function () { </span></div>
<div>
<pre> var values = $(this).val();
 console.log(values);
});

</pre>
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!

</div>

Please insert min. 20 characters.

I think I found the problem. Assume the following code (I started with your index.html that comes with MDB-Bootstrap, and just substituted the select tag and the added the javascript):

<option value="" disabled selected>Choose your country</option>

<option value="2">Germany</option>

<option value="3">France</option>

<option value="4">Poland</option>

<option value="5">Japan</option>

</select>

<label>Label example</label>

$(document).ready(function() {

$('.mdb-select').material_select();

$('.mdb-select').on('change', function() {

alert($('.mdb-select').val());

});

</script>

The code above will fail. The reason is that I ran '.val()' on a class identifier and not an id. However, in the example above, if I change the alert code to:

alert($('#test').val());

I will get the correct value. So, even later on, if I want to get the 'select' value(s), I have to access the <select> element with an 'id', not a class.

Normally, it shouldn't matter whether I use an id versus a class as a selector, but with your code it does matter.

The problem is, your support team answered another user (https://mdbootstrap.com/support/multiselect-values-nice-ui-horrible-deployment-for-devs/) with the following code as a method of getting the <select> value:

$('.mdb-select').change(function () {

 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 5 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.

Add comment

dmpneuro premium answered 5 years ago

0 0 Best answer

Piotr -

I'm not clicking a second time on the same value and uncheck it. Let me repeat the scenario:
<ol>
 	<li>I have a multiselect element and call .material-select()</li>
 	<li>I created a '$(".mdb-select").on("change", function() { alert($(this).val()); });' event for the multiselect</li>
 	<li>I click an option only ONCE - that triggers the "change" event</li>
 	<li>An alert popup shows - with the correct selected value</li>
 	<li>I click the alert 'Ok' button to close that alert popupIMME</li>
 	<li>IMMEDIATELY after that alert closes, another alert popup shows, this time with an empty box - no value</li>
 	<li>I don't select any more options, just the initial one I selected</li>
 	<li>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.</li>
</ol>
It seems like your routine is initially getting the correct value(s) and setting the input area correctly, but then it's running a second time and clearing the proper selected values, but I only clicked the option once.

I took the <select> element code right from your website. It doesn't work.

Please insert min. 20 characters.

Piotr - I'm not clicking a second time on the same value and uncheck it. Let me repeat the scenario:

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.

It seems like your routine is initially getting the correct value(s) and setting the input area correctly, but then it's running a second time and clearing the proper selected values, but I only clicked the option once. I took the <select> element code right from your website. It doesn't work.

Piotr Glejzer staff commented 5 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 ?

Add comment

dmpneuro premium answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

I'm sorry but your fix still doesn't work. I changed 'icon_url' to 'iconUrl' as you suggested. If I do the following: $('.mdb-select').on('change',function() { alert($(this).val()); }); I will get an alert message twice: -> The first time will correctly show me the value(s) I selected in my multiselect. -> The second time, the value (.val()) in the alert box will be empty So, running .val() is still running it twice, and the second time it is clearing the value, so I wind up with an empty value. That's not good. I need a multiselect and the ability to get the value(s) of the multiselect. Please advise. Thank you.

Piotr Glejzer staff commented 5 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

Add comment

Piotr Glejzer staff answered 5 years ago

0 0 Best answer

<p>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.<br />
You need to find your material-selecjt.js file.<br />
Next, you need to go to 160 line in material select.<br />
Change icon_url to iconUrl !<br />
It should look like that :</p>
<pre><code>
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> </code> </pre>
<p>We are very sorry again about that bug.<br />
Best,<br />
Piotr</p>

Please insert min. 20 characters.

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

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Premium
Premium support: Yes
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

dmpneuro

Premium support 52Support score
10Questions 7Answers 1Snippets