I am using a select2 component for selection.
I fiddled an example together here:
https://fiddle.jshell.net/mmo2dqno/15/
What I am trying to do is:
Select an item via the select2 widget
Show that item in the div below
Dont show the label in the search box.
This works fine. The problem is, that when one item is selected, the searchbox isn't showing the placeholder attribute anymore.
How can I tell the browser to assume the input as empty and show the placeholder again?
You could kill the select2 plugin with JS, and then load it again.
Or you could use Js to choose an disabled placeholder option.
Related
I am using React Select Package for dropdown. I wanted the placeholder option to display in the menu option for the user to select it as the dropdown field is not mandatory and the user can leave them empty or unselected.
I have tried many ways. I created a Custom placeholder component to display, but that is also not working. I tried passing a hardcoded value in options array. But that would also not work as i will be getting options from api afterwards.
I have posted my code in Sandbox for better clarity.
https://codesandbox.io/s/stoic-bush-3wstx?file=/src/App.js
I have a drop down with checkboxes besides it. First I want to add a search button in the dropdown. Second, once values are selected, a submit button on clicked should display the selected values with a textbox besides it.
Instead of checkboxes you could select with multiple option.
I would recommend you to use select2 library for your requirement.
It provides search box along with multiple value selection and different styles also which is very handy because it's very difficult to style option tag in html.
Find below the select2 url:
https://select2.org/getting-started/installation
I'm using selectric - plugin for replacing select in forms and I'm struggling with the add search option, sadly this plugin does not come with such a feature.
I got to the point where I can create an input over label and refresh options after typing something, but it does not work as I expect. I got to this point:
jsfiddle http://jsfiddle.net/fcamjb57/
The issue is as you click the input, the whole select closes.
I am using the select2 jquery plugin for select dropdown feature in web site.
Every select box in not required to be selected for the form submission .
I want user to be able to deselect the selected option if he wants to. Is there any way I can achieve this using Select2 Plugin. Any Help would be appreciated. Thank You.
You can put a blank option(option tag with blank value) in the select box for where you want the user to be able to deselect the value. In not sure what this has to do with select2.
If this doesn't solve you problem then let me know what options are you using to initialize select2 plugin or maybe elaborate more on the question.
I'm using this following tool to make the dropdown searchable and look nice.
Harvesthq Chosen
First I'm loading the data dynamically in dropdown and applying this code to apply the effect.
$(".chosen-select").chosen();
It works just fine. Everything ok. Then depending on some option I want to empty all data and insert new options. Now problems occur. The newly added options are not shown. Old options are still visible.
So I checked with the firebug. Select tag contains my desired data, but it's showing wrong data(Old ones).Some kind of div is visible. I tried to apply the chosen methd once again. But not working. Then I tried
$("#form_field").trigger("chosen:updated");
And not working either. Can anybody tell me what is missing?
I want to clear and load data dynamically multiple times in dropdown and apply the chosen effect.
This worked for me
$("#form_field").trigger("liszt:updated");