3
I have a page with a combo that allows multiple selections of your items.
If the user selects only one item, when closing the combo a text is displayed about the selected item. if, however, the user selects multiple items, when closing the combo the displayed text is "X chosen", where X is the number of selected items.
I know that if the user opens the combo again he can see the selected items but I want to create a button, with a magnifying glass, to be placed next to this combo which, when clicked, displays a popup with the list of selected items in the combo.
Below is the combo generator code:
<script type="text/javascript">
$(document).ready(function () {
/*PRODUTOS*/
$('#produto').multiselect({
includeSelectAllOption: false,
nonSelectedText: '[Selecione uma opção]'
});
});
</script>
@jp_almeida You missed include important information: you are using the plugin multiselect. I did not know the plugin and when searching for its documentation (to answer your question) I saw that he already does this job of inserting the selected items in another list (that you can keep visible to the user). So what is your question? How to insert the items in the other list? Or, how to make the other list always visible?
– Renan Gomes
I want the user to click on the magnifying glass next to the product combo to appear like a screen with the selected products. Like a balloon.
– jp_almeida
Renan, do you have any idea how to do this? I found only with anchor and not image as I want.
– jp_almeida
@jp_almeida Can I post here in the comments the solution you found? I’ve never seen this plugin but I can see if I can get something :)
– Renan Gomes
Renan found this: <script> $(Function() { $("#mypopover").Popover({ Trigger:'click', html:true, content:Function(){Return $("#Popover-content").html();}} ).on('click',Function() { $('.multiselect').multiselect(); }); }); </script>
– jp_almeida
In case he put the select on a button, I tried to do this but it didn’t look cool.
– jp_almeida
<button id="mypopover" type="button" class="btn btn-default" data-container="body" data-toggle="Popover" data-placement="bottom" data-content=' <div class="btn-group"> <select class="form-control multiselect" Multiple="Multiple"> <option>Choice 1</option> <option>Choice 2</option> <option>Choice 3</option> </select>
– jp_almeida