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.
In a django form, I have set the default option for a select. It is not showing those changes in UI, but after inspecting I'm seeing that the DOM is actually being changed. When I check in the console for the HTML, I can see that the selected option is set to 1, but when I ask jquery for the selected option it gives me another.
$("select[name=spread_format] option")
[<option value="0">in.</option>, <option value="1" selected="selected">ft.</option>]
$("select[name=spread_format] option:selected")
[<option value="0">in.</option>]
$("select[name=spread_format]").val()
"0"
What I want to accomplish is to show 1 as default. This select is being rendered in a bootstrap modal.
Strange to notice that the selected option in UI is '0', not '1' as indicated my DOM.
In order to get the value of the selected option you should use val(), and not searching for the <option> element.
$('#btn1').click(function() {
console.log($('#s1').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="s1">
<option value="1">A</option>
<option value="2" selected="selected">B</option>
<option value="3">C</option>
</select>
<br />
<button id="btn1">click</button>
I use a JQuery/Javascript plugin which changes select boxes with:
$('select').multipleSelect();
The select boxes look like:
<select multiple=\"multiple\">\r\n" +
<option selected=\"selected\" value=\"1\">January</option>
<option value=\"2\">December</option>
<option value=\"3\">December2</option>
</select>
The probem is that it changes all select boxes on the site but it should change one select box only.
How to do it?
Just give the select you want to select, a class, and then call the plugin on it
<select class="selectMe" multiple="multiple">
<option selected="selected" value="1">January</option>
<option value="2">December</option>
<option value="3">December2</option>
</select>
And then in jQuery
$('select.selectMe').multipleSelect();
You need not define an actual class in CSS, though you can, if you want. From now on, just add class selectMe to the <select> that you want the plugin to be called upon.
This question already has answers here:
How do I make a placeholder for a 'select' box?
(41 answers)
Closed 9 years ago.
<select name="name">
<option>Select an option.</option><br/>
<option>A</option><br/>
<option>B</option><br/>
<option>C</option><br/>
</select>
HTML5 has required="required", and this is the kind of effect I want with the dropdown above. I don't want the user to select "Select an option", only "A", "B", or "C". I know I could set a default value of A and just remove the "Select an option" option entirely, but I don't want users to click haphazardly without reading the options available.
Can this be done with HTML and/or JS?
edit: this code is only to force users to choose a valid option, instead of the one by default... validation for submit/change/etc should be added
You should just disable the first option and setting it as selected by default:
<select name="name">
<option disabled="disabled" selected="selected">Select an option.</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
That should do the trick, demo here http://jsfiddle.net/pixshatterer/Q27HX/
If you use the Validation plugin (here: http://jqueryvalidation.org/) and update your <select> to supply value on each <option>, it will prevent form submission if the "empty" value is selected:
<select name="name" required>
<option value="">Select an option...</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
It's also worth noting that the only valid child elements of a <select> is either <optgroup> or <option>, so remove those <br />s.
If jQuery is not an option, you could always add an onclick to the select or an onsubmit to the form and do a quick check on an empty string (or whatever you set the default value to).
Just give display:none to the element option and disabled=disabled. Thanks to #pixshatterer
http://jsfiddle.net/Xh9nh/4/
EDIT : Put visibility:hidden by mistake.
How can I check if a user has selected something from a <select> field in HTML?
I see <select> doesn't support the new required attribute... do I have to use JavaScript then? Or is there something I’m missing? :/
Mandatory: Have the first value empty - required works on empty values
Prerequisites: correct html5 DOCTYPE and a named input field
<select name="somename" required>
<option value="">Please select</option>
<option value="one">One</option>
</select>
As per the documentation (the listing and bold is mine)
The required attribute is a boolean
attribute.
When specified, the user
will be required to select a value
before submitting the form.
If a select element
has a required attribute specified,
does not have a multiple attribute specified,
and has a display size of 1 (do not have SIZE=2 or more - omit it if not needed);
and if the value
of the first option element in the
select element's list of options (if
any) is the empty string (i.e. present as value=""),
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.
The <select> element does support the required attribute, as per the spec:
http://dev.w3.org/html5/spec-author-view/the-select-element.html#the-select-element
Which browser doesn’t honour this?
(Of course, you have to validate on the server anyway, as you can’t guarantee that users will have JavaScript enabled.)
Yes, it's working:
<select name="somename" required>
<option value="">Please select</option>
<option value="one">One</option>
</select>
you have to keep first option blank.
You can use the selected attribute for the option element to select a choice by default. You can use the required attribute for the select element to ensure that the user selects something.
In Javascript, you can check the selectedIndex property to get the index of the selected option, or you can check the value property to get the value of the selected option.
According to the HTML5 spec, selectedIndex "returns the index of the first selected item, if any, or −1 if there is no selected item. And value "returns the value of the first selected item, if any, or the empty string if there is no selected item." So if selectedIndex = -1, then you know they haven't selected anything.
<button type="button" onclick="displaySelection()">What did I pick?</button>
<script>
function displaySelection()
{
var mySelect = document.getElementById("someSelectElement");
var mySelection = mySelect.selectedIndex;
alert(mySelection);
}
</script>
You need to set the value attribute of option to the empty string:
<select name="status" required>
<option selected disabled value="">what's your status?</option>
<option value="code">coding</option>
<option value="sleep">sleeping</option>
</select>
select will return the value of the selected option to the server when the user presses submit on the form. An empty value is the same as an empty text input -> raising the required message.
w3schools
The value attribute specifies the value to be sent to a server when a form is submitted.
Example
<form action="">
<select required>
<option selected disabled value="">choose</option>
<option value="red">red</option>
<option value="yellow">yellow</option>
<option value="green">green</option>
<option value="grey">grey</option>
</select>
<input type="submit">
</form>
try this, this gonna work, I have tried this and this works.
<!DOCTYPE html>
<html>
<body>
<form action="#">
<select required>
<option value="">None</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
</body>
</html>
Make the value of first item of selection box to blank.
So when every you post the FORM you get blank value and using this way you would know that user hasn't selected anything from dropdown.
<select name="user_role" required>
<option value="">-Select-</option>
<option value="User">User</option>
<option value="Admin">Admin</option>
</select>
first you have to assign blank value in first option.
i.e. Select here.than only required will work.
Works perfectly fine if the first option's value is null. Explanation : The HTML5 will read a null value on button submit. If not null (value attribute), the selected value is assumed not to be null hence the validation would have worked i.e by checking if there's been data in the option tag. Therefore it will not produce the validation method. However, i guess the other side becomes clear, if the value attribute is set to null ie (value = "" ), HTML5 will detect an empty value on the first or rather the default selected option thus giving out the validation message. Thanks for asking. Happy to help. Glad to know if i did.
In html5 you can do using the full expression:
<select required="required">
I don't know why the short expression doesn't work, but try this one.
It will solve.
Try this
<select>
<option value="" style="display:none">Please select</option>
<option value="one">One</option>
</select>
You can do it also dynamically with JQuery
Set required
$("#select1").attr('required', 'required');
Remove required
$("#select1").removeAttr('required');