How to get the value?

[jaapmurre]

Problem

When I use jquery on the orginal multiselect, the val() function only gives a single value. As far as I could see the original is not kept in sync with the added

. Also, I could not find a way to get the value in source code or in the demos.

Solution (?)

I now solved it like this:

    var value = [];
    $('#id_{url} + .dashboardcode-bsmultiselect ul.dropdown-menu li input').each(function(){
        if ($(this).prop('checked')) {
            value.push($(this).prop('id').split('-').pop()); // N.B. Not robust to orginal values with hyphens in them
        }
     })
    return value.join(','); 

This works (returns the selected values as a comma-delimited list) but is brittle: If a value has a hyphen this would not work.

rpokrovskij commented 5 years ago

Hi, thank you for your feedback. Could you provide a jsfiddle (e.g. editing https://jsfiddle.net/u2xf6bew/3/ )?

Actually the simplest code should work:

 var $q = $('#originalInput').find(":selected"); 

As usual bootstrap/jquery plugin BsMultiSelect has "unobtrusive" API. Means developers relly on original input element (even if it hidden) - so use its triggers and properties.

edwolfe807 commented 5 years ago

This doesn't seem to work correctly. It completely ignores any selections I make.

<select multiselect="" class="form-control" name="newUserMemberSites" id="newUserMemberSites" style="display: none;">
<option value="1">Option A</option>
<option value="100">Option B</option>
</select>

$('select[multiselect]').bsMultiSelect({
        selectedPanelDefMinHeight: 'calc(2.25rem + 2px)',  // default size
        selectedPanelLgMinHeight: 'calc(2.875rem + 2px)',  // LG size
        selectedPanelSmMinHeight: 'calc(1.8125rem + 2px)', // SM size
        selectedPanelDisabledBackgroundColor: '#e9ecef',   // disabled background
        selectedPanelFocusBorderColor: '#80bdff',          // focus border
        selectedPanelFocusBoxShadow: '0 0 0 0.2rem rgba(0, 123, 255, 0.25)',  // foxus shadow
        selectedPanelFocusValidBoxShadow: '0 0 0 0.2rem rgba(40, 167, 69, 0.25)',  // valid foxus shadow
        selectedPanelFocusInvalidBoxShadow: '0 0 0 0.2rem rgba(220, 53, 69, 0.25)',  // invalid foxus shadow
        inputColor: '#495057', // color of keyboard entered text
        selectedItemContentDisabledOpacity: '.65' // btn disabled opacity used
    });

However, when I make my selections via

$('#${param.id}MemberSites').find(":selected").each(function(index)

I only get whatever I selected by default (selected after initialization using jquery). If I remove all of the selections, this return empty. If I select all the options, I still only get the default selected one.

Am I doing something wrong or ...?

rpokrovskij commented 5 years ago

It works. https://jsfiddle.net/Lxr15ywt/3/ . press click me. and please provide your jsfiddle

edwolfe807 commented 5 years ago

When I look at your fiddle and click the button, it says "3"; however, there are only 2 selected.

EDIT After I select a 3rd one and click the button again, it says "4". It's always one more than what it should be. I'm failing to see how that means it works.

UPDATE He is a fiddle: https://jsfiddle.net/edwolfe/eLnu5cvb/#&togetherjs=a9l3o2D8wo 1) click "click me" you will see "1" 2) select "Option B" 3) click "click me" again 4) it still shows "1"

rpokrovskij commented 5 years ago

There was one "Hidden selected" option in my fiddle. Removed as confused. Now checking yours

rpokrovskij commented 5 years ago

He is a fiddle: https://jsfiddle.net/edwolfe/eLnu5cvb/#&togetherjs=a9l3o2D8wo

changing <select multiselect to standard multiple="multiple" solves the problem.

edwolfe807 commented 5 years ago

changing <select multiselect to multiple="multiple" solves the problem.

what is wrong with using multiselect? isn't that valid markup?

rpokrovskij commented 5 years ago

'multiselect' attribute is not an HTML standard. without "multiple" we have "combobox. May be some of internally used jquery functions do not expect that we apply multiselect functionality to something that is "combobox"

edwolfe807 commented 5 years ago

ok; i changed it and it is working. Thanks!

• © Githubissues.
• Githubissues is a development platform for aggregating issues.

[rpokrovskij]

Hi, thank you for your feedback. Could you provide a jsfiddle (e.g. editing https://jsfiddle.net/u2xf6bew/3/ )?

Actually the simplest code should work:

 var $q = $('#originalInput').find(":selected"); 

As usual bootstrap/jquery plugin BsMultiSelect has "unobtrusive" API. Means developers relly on original input element (even if it hidden) - so use its triggers and properties.

[edwolfe807]

This doesn't seem to work correctly. It completely ignores any selections I make.

<select multiselect="" class="form-control" name="newUserMemberSites" id="newUserMemberSites" style="display: none;">
<option value="1">Option A</option>
<option value="100">Option B</option>
</select>

$('select[multiselect]').bsMultiSelect({
        selectedPanelDefMinHeight: 'calc(2.25rem + 2px)',  // default size
        selectedPanelLgMinHeight: 'calc(2.875rem + 2px)',  // LG size
        selectedPanelSmMinHeight: 'calc(1.8125rem + 2px)', // SM size
        selectedPanelDisabledBackgroundColor: '#e9ecef',   // disabled background
        selectedPanelFocusBorderColor: '#80bdff',          // focus border
        selectedPanelFocusBoxShadow: '0 0 0 0.2rem rgba(0, 123, 255, 0.25)',  // foxus shadow
        selectedPanelFocusValidBoxShadow: '0 0 0 0.2rem rgba(40, 167, 69, 0.25)',  // valid foxus shadow
        selectedPanelFocusInvalidBoxShadow: '0 0 0 0.2rem rgba(220, 53, 69, 0.25)',  // invalid foxus shadow
        inputColor: '#495057', // color of keyboard entered text
        selectedItemContentDisabledOpacity: '.65' // btn disabled opacity used
    });

However, when I make my selections via

$('#${param.id}MemberSites').find(":selected").each(function(index)

I only get whatever I selected by default (selected after initialization using jquery). If I remove all of the selections, this return empty. If I select all the options, I still only get the default selected one.

Am I doing something wrong or ...?

[rpokrovskij]

It works. https://jsfiddle.net/Lxr15ywt/3/ . press click me. and please provide your jsfiddle

[edwolfe807]

When I look at your fiddle and click the button, it says "3"; however, there are only 2 selected.

EDIT After I select a 3rd one and click the button again, it says "4". It's always one more than what it should be. I'm failing to see how that means it works.

UPDATE He is a fiddle: https://jsfiddle.net/edwolfe/eLnu5cvb/#&togetherjs=a9l3o2D8wo 1) click "click me" you will see "1" 2) select "Option B" 3) click "click me" again 4) it still shows "1"

[rpokrovskij]

There was one "Hidden selected" option in my fiddle. Removed as confused. Now checking yours

[rpokrovskij]

He is a fiddle: https://jsfiddle.net/edwolfe/eLnu5cvb/#&togetherjs=a9l3o2D8wo

changing <select multiselect to standard multiple="multiple" solves the problem.

[edwolfe807]

changing <select multiselect to multiple="multiple" solves the problem.

what is wrong with using multiselect? isn't that valid markup?

[rpokrovskij]

'multiselect' attribute is not an HTML standard. without "multiple" we have "combobox. May be some of internally used jquery functions do not expect that we apply multiselect functionality to something that is "combobox"

[edwolfe807]

ok; i changed it and it is working. Thanks!