简体   繁体   中英

jquery-chosen plugin - display 'X' on selected item

I am using the jquery-chosen plugin. It is a multiple selection ListBox. It is working fine. But I would like the selected items to have an 'X' beside the item so the user can delete it if they want to. The default action is to backspace. What Attribute includes the 'X' on each selected item? This is my jquery code:

<script type="text/javascript">
     $(document).ready(function () {
         $(".chosen-select").chosen({
             search_contains: true,
             no_results_text: "Sorry, no match!",
             single_backstroke_delete: false,
             allow_single_deselect: true
         });
         $('.chosen-container').css('width', '600px');
    });

This is my ListBox code:

 <asp:ListBox ID="lstBoxTo" runat="server" SelectionMode="Multiple"
                    data-placeholder="Choose recipient(s)…" class="chosen-select">                       
        </asp:ListBox>

Currently, I am using the attribute, 'single-backstroke-delete' but I would like to have an 'X' beside the selected value instead. How do you configure that?

THanks.

UPDATE I believe my problem is the .png file needs to be added, 'chosen-sprite.png' to the project. The chosen.css references it. I added it to my Images folder and changed all of the paths to 'Image/chosen-sprite.png' but it still does not work.
THere is a comment at the top of the .css file not to 'hand edit the file'. Does anyone know how to add the image file to the project so it can see it?

我将selected-sprite.png添加到了具有chosen.css文件的文件夹中,并且工作正常。

Reading the documentation here , it looks as if you need to add the multiple attribute to your asp:ListBox .

 <asp:ListBox ID="lstBoxTo" runat="server" SelectionMode="Multiple"         
    multiple data-placeholder="Choose recipient(s)…" 
    class="chosen-select">                       
 </asp:ListBox>

If ASP.Net objects to having an attribute ( multiple ) with no value, you could try multiple="true" and see if that works.

Disclaimer: this is all from reading the documentation. I have not tried this myself.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM