Popup with a magnifying glass

Asked

Viewed 132 times

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.

combo para a seleção

combo selecionado um elemento

combo selecionado 3 elementos

Below is the combo generator code:

<script type="text/javascript">
    $(document).ready(function () {
        /*PRODUTOS*/
        $('#produto').multiselect({
            includeSelectAllOption: false,
            nonSelectedText: '[Selecione uma opção]'
        });
    });
</script>
  • 1

    @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?

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

  • Renan, do you have any idea how to do this? I found only with anchor and not image as I want.

  • @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 found this: <script> $(Function() { $("#mypopover").Popover({ Trigger:'click', html:true, content:Function(){Return $("#Popover-content").html();}} ).on('click',Function() { $('.multiselect').multiselect(); }); }); </script>

  • In case he put the select on a button, I tried to do this but it didn’t look cool.

  • <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>

Show 2 more comments
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.