0

I need to implement a drop-down which has a delete 'X' option next to each option item. Somewhat like the image shown below. The drop-down is populated dynamically and I need a way that does not inlvolve using list as an alternative.

EDIT: The icons next to each dropdown item refers to 'Edit'/'Delete'

enter image description here

Anup Amin
  • 85
  • 6

1 Answers1

1

You cannot put a checkbox into the usual <select> or multi-select HTML element.

However, here is another question where several good options are discussed.

This looks like the most useful and best suited to your purpose:

https://stackoverflow.com/a/27547021/1447509

And here is an example of how to change the default checkmark to an X:

https://stackoverflow.com/a/40123793/1447509

Sources:

How to use Checkbox inside Select Option

After selecting check box Instead of Tick symbol need X in html

UPDATE:

Given that you need both the HTML markup and the javascript to make it do what you want, you have two (possibly 3) steps to do:

  1. This answer provides a good example of how to create the custom-rolled <select> control.

  2. This answer shows you how to replace the checkbox created in step 1 with an icon/image of your choosing.

  3. The javascript to remove the x'd <option> is very simple:

    $(this).closest('option').remove();
  1. IF you also need to save these results, then you also need to learn:

4a. Server-side SESSIONS (so that each user's customizations are saved for them)

4b. A login system, so you know for which user to save the current customizations.

4c. Just the basics of how to use a back-end database, such as MySQL/MariaDB, in which to store the user customizations.

4d. AJAX - so you can schlep info to the back-end for insertion into the database without refreshing (or navigating away from) the current page. AJAX replaces the ancient and no-longer-used <form> construct. Frankly, once you've used AJAX a couple of times, you'll never go back. Totally easy.

If you are in a bind and need someone to create the whole thing for you, I refer you to one of these websites - I have used such services myself and can recommend them.

Community
  • 1
  • 1
cssyphus
  • 37,875
  • 18
  • 96
  • 111
  • Hi, Thanks for taking time to reply. However, I am not looking for a multiselect(checkbox in a dropdown). But, a way to 'EDIT' / 'DELETE' the items in the dropdown. – Anup Amin Apr 30 '19 at 14:16
  • So, beside each item (` – cssyphus Apr 30 '19 at 15:43
  • My apologies if the description was confusing. I DO NOT want checkboxes at all really. The 'cross' and 'pencil' icons next to each "option" correspond to 'delete' and 'edit' respectively, and I want to be able to delete the option when clicked specifically on the cross for a particular option(For the purposes of simplicity you could ignore the 'edit' feature as that warrants more discussion) Hopefully, that made more sense. – Anup Amin Apr 30 '19 at 20:17
  • Do you already have the HTML written for the ` – cssyphus Apr 30 '19 at 21:25
  • I do not. The above is a mock up I received from the Web Designer and I kinda have to stick to the design work. (If it were up to me, I'd have gone for a listview and make it look and work like a customized select.) – Anup Amin May 01 '19 at 17:39