When I use chosen in a select box then it will automatically select an option form option list.
When I click on x icon then it will show data-placebolder text.
But I Want to show default data-placebolder text.
Here is my code
HTML
<select class="chosen-select" data-placeholder="Select A User Group" id="user_group" name="user_group">
<option> </option>
<option value="1">Administrator</option>
<option value="2">Operator</option>
</select>
JS
$('.chosen-select').chosen({allow_single_deselect: true});
I would recommend you, use Select2 instead of Chosen. Replace the first <option></option> with the below:
<option value=""></option>
It shows the default placeholder. Also, setting the data-placeholder="Select A User Group" doesn't just work. Add these too:
data-placeholder="Select A User Group"
placeholder="Select A User Group"
And also, in the options, pass this:
$(element).select2({
placeholder: "Select A User Group"
});
Or, dynamically:
$(element).select2({
placeholder: $(this).attr("placeholder")
});
If you still insist using Chosen, here you go:
$(element).chosen({
placeholder_text_multiple: $(this).attr("placeholder"),
placeholder_text_single: $(this).attr("placeholder")
});
But don't forget to change the first option this way:
<option value=""></option>
Related
I have a multiselect bootstrap picker and would like to find the specific option that was just selected. For example, if I have the picker set to something like this:
<select class="form-select selectpicker" multiple aria-label="Default example">
<option value="Apple">Apple</option>
<option value="Cherry">Cherry</option>
<option value="Papaya">Papaya</option>
<option value="Kiwi">Kiwi</option>
</select>
When the user selects their first option, "Cherry", I would like to alert("Cherry"). When the user then selects their second option, "Apple", I would like to alert("Apple").
I have tried to use the option:selected:last value, but this only works to display the last option in the array of selected option. I would like to display the option that was most recently selected, regardless of its place in the array of selected options. Any insight is greatly appreciated.
EDIT: This questions was closed due to being marked as similar to the question found here: Get selected value in dropdown list using JavaScript
After looking through all of the provided answers in that link, I am not convinced that the questions are the same. I would like to get the most recently selected text in a multiselect picker, not the only selected option in a single select. So, if a user has both Apple and Papaya options selected, but selected the Apple option after selecting the Papaya option, I would like to alert("Apple"). Thanks.
Here Are Two Methods By which you can Use Alert.
First Method: With OnChange
<select class="form-select selectpicker" multiple aria-label="Default example" onchange = "alert(this.value)">
<option value="Apple">Apple</option>
<option value="Cherry">Cherry</option>
<option value="Papaya">Papaya</option>
<option value="Kiwi">Kiwi</option>
</select>
Second Method: Involves An Event Listener But Its Doing The Same Thing(Javascript)(Assuming That The ID of The Select Tag is selector
function change(){
alert(this.value)
}
document.getElementByID("selector").addEventListener("onchange",change)
I am trying to make a placeholder for an input field that is a drop down list. But somehow it doesn't work.
The following is an example on how to define a placeholder for a drop down list:
<select>
<option value="" disabled selected>Please Select Something</option>
<option value="Foo">Foo</option>
</select>
How can we set the default value for the select2 dropdown when initializing it with something like:
$('.className').select2({
placeholder: 'Select an option',
data: dataArray
});
What you have is fine - you just need to add a blank <option></option> tag in your select element.
For example:
<select id="listOfNames">
<option></option>
<option value="Shyam">Shyam</option>
<option value="James">James</option>
<option value="Helen">Helen</option>
<option value="Dave">Dave</option>
</select>
You can apply the placeholder as an option to select2 (as you have in your example) or as a the data-placeholder attribute of the select element.
Also, you can provide select2 with the allowClear : true property which allows users to remove an item once they have selected it (returning to the placeholder).
Fiddle: https://jsfiddle.net/djuuuh80/3/
Note: Select boxes with the multiple attribute set automatically use the placeholder if provided without the need for the blank <option> tag.
I have the following piece of code in a contact form for a site I am designing:
<select id="Category" name="Category">
<option value="0" selected="selected" disabled>Category</option>
<option value="1">General Info</option>
<option value="2">Booking</option>
<option value="3">Auditions</option>
</select>
I would like set the menu such that the user cannot leave category as the selected option. Is there any way to do this with HTML? If not, how would I do it with JavaScript?
Thank you
According to the HTML5 spec,
Constraint validation: If the element has its required attribute specified, and either none of the option elements in
the select element's list of options have their
selectedness set to true, or the only option element in
the select element's list of options with its
selectedness set to true is the placeholder label option,
then the element is suffering from being missing.
If a select element has a required attribute
specified, does not have a multiple attribute specified, and
has a display size of 1; and if the value of the first
option element in the select element's list of
options (if any) is the empty string, and that option
element's parent node is the select element (and not an
optgroup element), then that option is the select
element's placeholder label option.
Therefore, you can use
<select id="Category" name="Category" required>
<option value="" selected disabled>Category</option>
<option value="1">General Info</option>
<option value="2">Booking</option>
<option value="3">Auditions</option>
</select>
When the user click on any option, he can´t return the first one back. But he can submit form without change, then you need to validate via JS.
It's quite simple,
function validate() {
var select = document.getElementById('Category');
return !select.value == 0;
}
And the form in HTML:
<form onsubmit="return validate()">...</form>
Will disabling select work for you?
<select id="Category" name="Category" disabled>
<option value="0" selected="selected">Category</option>
...
</select>
Or maybe disabling all but selected option will work for you (as shown here: https://stackoverflow.com/a/23428851/882073)
Ideally, you would simply remove the selected attribute from disabled options on the server side when generating the HTML document to begin with.
Otherwise, if you are using JQuery, this can be done fairly easily with:
$('#Category').find('option:not([disabled])').first().prop('selected', true);
Add this to your ondomready event handler. This will force the first non-disabled option to be selected for this select element regardless of its options' selected attributes. The disadvantage of this method is that it will prevent the selected attribute from being able to be used at all with this select element.
On the other hand, if you are trying to create category headers within a select element, you should consider using an optgroup element instead, since that is the correct semantic markup for this:
<select id="Category" name="Category">
<optgroup label="Category">
<option value="1">General Info</option>
<option value="2">Booking</option>
<option value="3">Auditions</option>
</optgroup>
</select>
I have a select that uses ng-options to populate the select as follows:
<select class="form-control"
ng-model="Data.selectedPerson"
ng-options="v as (v.Name ) for v in Data.people track by v.Name">
</select>
I don't want to add a value to the collection for a default if the people collection is empty or no value is selected yet. I would like to have a prompt in the select to encourage them to use the select. Thanks for your suggestions.
Just add a default option, just so angular will use this option when there is nothing selected in the ngModel or an invalid item is populated in the model. This way you don't need to add an empty value in your collection.
<select class="form-control"
ng-model="Data.selectedPerson"
ng-options="v as v.Name for v in Data.people track by v.Name">
<!-- Add your default option here -->
<option value="">Please select a person</option>
</select>
You could also change the text based on the condition:-
<option value="">{{ Data.people.length ? "Please select a person" : "No one available for selection" }}</option>
You can also remove it from DOM if it has already a selected value.
<option ng-if="!Data.selectedPerson" value="">Please select a person</option>