select box with multiple values turning on and off - javascript

I've got a select box in a form with multiple="multiple" switched on.
At the moment I can obviously hold Ctrl if I want to select multiple items, but what I really want it the option to just click any i like, and they just get selected or deselected when clicked.
I guess kinda like a whole list of checkboxes, but I really don't want them as checkboxes, I want them all as a dropdown.
Is this even possible? Maybe with jquery?

I think going with checkboxes is not a bad way. Check out http://jqueryui.com/button/#checkbox. Then you can style the buttons like a list with display: block etc.

You can also do something a little different like this: jQuery Sortable - Select and Drag Multiple List Items
The demo shown there works as you requested in an appealing way.

Related

How to force a dropdown list to behave like a list box using javascript

I need to add multiple attribute to a select list, but unfortunately the dropdown list is not editable through HTML since it is a drag and drop feature of a CMS (Spiceworks user portal) I am using.
The CMS is quite outdated; my only other option is to add checkboxes which would make the page extremely long, since there are a total of 15 options to select. (In my example, this is different)
There is no listbox option in the CMS, which is why I need to use javascript to force the dropdown to act like a listbox.
Please look here at what I tried to do: https://jsfiddle.net/jamiedewitz/sdyn0xqz/
Is there a way to force javascript to add the multiple attribute to the dropdown list or is this just wishful thinking?
Sure
const addMultiple = select => select.setAttribute('multiple', true);
You can then use a CSS selector to target one or multiple elements
addMultiple(document.querySelector('#custom_ticket_form_field_55'))
document.querySelectorAll('select').forEach(addMultiple)
By the way, id="custom_ticket_form_field_55" is used in multiple places in your HTML, so actually the first variation wouldn't work. If you can, try to make your ids unique.
Note that it also breaks accessibility because your label doesn't point to the select anymore.

How do I implement a multiple selection filter dropdown in Semantic UI React

I would like to implement a dropdown component that shows the selected options upon expanding.
Here is what I have so far, but it tokenizes the selected options, which I don't want. I want them to look similar to a single selection dropdown where they are just shaded/highlighted, but there can be multiple selected.
<Dropdown
text="Filter"
icon="filter"
className="icon"
fluid multiple selection labeled button
options={filterOptions}
/>
As you noticed, Semantic doesn't (currently) support a whole lot of customization regarding multi-select. So, you have two basic options. First, you could use the subcomponents implement the details of dropdown yourself (including all the events that get fired) and only rely on Semantic for the styling. If you choose this route, you might as well write your own.
Alternatively, you can hack together a solution using some Semantic's built-ins.
To do this, you need to change two main behaviors:
1st - you need hide the tags. You can do this by modifying the renderLabel method on the dropdown. Returning null from that method will prevent the tags from being rendered.
2nd - you need to unhide the selected options in the dropdown. There's no built-in way to do this, but you can fake it by inserting a new duplicate option for every option selected. Make sure you attach an onClick to allow deselecting of objects.
Here's a working example: https://stackblitz.com/edit/so-49442592
There's a lot of quirks to it, so feel free to ask questions!

Making an editable options box in HTML (Possible Javascript)

I want to create a drop down menu (like an <options> tag) in an HTML form. The issue is that I also want the user to be able to not only select from a list of options, but also type in their own if they want. So it would almost be like there was a text field that was automatically filled when you selected something from the drop down box, but you could still edit it.
This is the sort of thing I mean, only its a desktop app on windows (notice how the text can be edited):
I'm pretty flexible about exactly how it looks. If there is another, easy to implement, solution where the user can easy scroll/see a list of options or add in their own that doesn't look like what I described, I'm open to the idea.
Most of the drop down auto type scripts out there will let you type into the input box text that doesn't have to match one of the options in the options list. Just when you go to submit the form be sure to check to see if there is a selectedValue in the drop down and if not grab the drop down's text instead. How to do this will vary on what script you are using. As to what type ahead drop down script to use there are plenty out there, here is an ancient one that works pretty well but there are lot's of others.
http://trappedinhoth.blogspot.com/2008/07/jquery-autocomplete-example.html
HTML 5 even supports an autocomplete drop down
http://trappedinhoth.blogspot.com/2013/03/html-5-datalist-key-value-work-around.html
I hope that points you in the right direction.

Showing different objects depending on user selection in menu

I have html code where dropdown menu has several values including "Custom". I would like to have different html content below dropdown menu depending on user selection. If user chooses "Custom" value then I need to show one more dropdown menu and two editboxes and if in any other cases I need to show only one editbox.
As I understand I need to use onchange() event and javascript code. Is that right?
Could you please advice?
Thank you.
It seems like you are just getting started with this. Yes, you are probably going to end up using javascript for this. You need to understand that javascript is used to
Modify the DOM (i.e. the html) on the page dynamically
Detect events that happen on different elements of the DOM(e.g. a div or the window).
among other things.
The change event is only one event. Depending on the requirements, you might want to use change, but you might want to show the submenu when the user hovers the pointer over Custom.
Be aware that there are probably libraries you can use to show menus with submenus.
If you want to roll your own, you should try the following:
Show a div that looks like a popup when the user clicks a button or some area of the screen.
Populate the popup with the menu options
Detect when the user mouse-over or clicks the 'Custom' option.
Display the submenu.

Drop down box in form with a button to add a second copy of drop down box

I have a simple form that lists user names and for each user, the form displays a drop down box with a list of items that can be assigned to the user. Since it is often necessary to assign multiple items to a user, I need to display a button next to the drop down that says "add another item" which automatically inserts another an identical drop down box below the first one and preserves the selected option in the original drop down box.
You might be thinking - why not just display a series of radio buttons or checkboxes? Can't do that for two reasons, 1) the list of items is too long and 2) there are times when I need to assign the same item to a user twice.
I know this "add another item" button can be done in Javascript, I just don't know the code.
Here's an example of what I need to do (not working because there is no onClick function yet).
http://www.dropthechalk.org/sampleform.html
This has nothing to do with dynamically populating the items in the drop down box, so I've found it hard to search for solutions. Any help or links to resources much appreciated!
Here is a tutorial that I did a while ago on dynamically adding input elements via JavaScript. This should be a good starting point.

Categories

Resources