Develop Reference

How to get the current input value which is entering on select 2 input field

When i'm first time entering multi select values i got the current entered text value based on below code in jquery
<select class="form-control select2" multiple="multiple" data-placeholder="Select areas" style="width: 100%;" id="edit_areas" name="area">
</select>
$(".select2-search__field").val()
$(document).on('keyup',".select2", function (e) {
var city = $("#add_city option:selected").text();
var location = $(".select2-search__field").val();});
which works fine.
But on edit when try to enter more values,current entering value is failed to get by using above code its showing empty
Note: Here i'm setting the dropdown dynamically based on user enters
Can anyone help me to resolve this issue.

You should use select2 specific methods to get and set the value, once you already converted to the select2.
When you are setting the value (e.g. for edit), use code like following :
$(".select2").select2("val", "Am,WY".split(","));
and to get the value, use code like following :
$(".select2").select2('val');
Hope it will resolve your issue (as not sure what is the HTML and code you are having, its just a guess :-))

Without seeing your HTML or complete jQuery it's hard to see exactly what you are trying to do. So I have made a stab in the dark.
$(document).ready(function() {
$('.mrselect').on('change', function() {
var values = $(this).find('option:selected');
var fancyPantsArray = [];
values.each(function() {
fancyPantsArray.push($(this).val());
});
console.log(fancyPantsArray);
});
});
<select class="mrselect" multiple="multiple" name="mrselect">
<option value="Mr Option 1">Mr Option 1</option>
<option value="Mr Option 2">Mr Option 2</option>
<option value="Mr Option 3">Mr Option 3</option>
<option value="Mr Option 4">Mr Option 4</option>
<option value="Mr Option 5">Mr Option 5</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

try this
var nome = $("#select_id").data('select').$dropdown.find("input").val();
or
$('input.select2-input').val();

Select a select option element without a "selected" attribute

So here is the thing:
I have a java app and it creates a group of selects based on a db. Also, if it happens that an element (let's call it product) has that value, it print the option with the selected attribute.
<select>
<option value="1">text1</option>
<option value="2" selected>text2</option>
<option value="3">text3</option>
<option value="4">text4</option>
<option value="5">text5</option>
</select>
<select>
<option value="1">text1</option>
<option value="2">text2</option>
<option value="3">text3</option>
</select>
<select>
<option value="1">text1</option>
<option value="2">text2</option>
</select>
What i want to do is set in blank (set a value of zero) to the selects that not has an element with a selected value.
If you know another form to set to blank a list (diferent from put a default empty element in every select), please let me know.

The way to do this without an empty option, is to set the selectedIndex to -1
$('select:not(:has(option[selected]))').prop("selectedIndex", -1);
FIDDLE

Demo $('option:not(:selected)').val(0); use :not and :selected and set the value to 0

Modify selected property in select option

I'm building a select with several options from my php script using pattemplate.
But no matter what I do, the selected option shows in the dom tree like this:
<select id="academicYear">
<option value="1516">2015-2016</option>
<option value="1415">2014-2015</option>
<option selected="" value="1314">2013-2014</option>
<option value="1213">2012-2013</option>
</select>
Is there any way using dom - javascript - jquery to turn:
<option selected="" value="1314">2013-2014</option>
Into:
<option selected value="1314">2013-2014</option>
?
The reason why I need the change: with selected="" I don't get any selection when my select shows in the dialog window where I present it. When I turn it into just select with Firebug and Chrome debug bar the selection works.
Thans a ton!

You can use the id for faster and safer selector:
$('#academicYear option[value="1314"]').prop('selected', true);
The right html sintaxis is:
<option selected="selected" value="1314">2013-2014</option>

I believe setting the value of select will alter that property correctly for you. Otherwise if you still need to change the selected property...
$('option[value="1314"]').prop('selected', true);

How initialize dropdown (<select/>) with preselected value and then change it?

I've got a grid with dropdown in every row and I need to render it's state from DB.
So I've got dropdowns defined like that with selected option specified for preselecting the value from DB.
<select id='selectId'>
<option value='1'>Option 1</option>
<option value='2' selected='selected'>Option 2</option>
<option value='3'>Option 3</option>
</select>​
The problem is in that when I change the value of a dropdown defined like that in a browser it changes on UI but selected attribute don't move and stays where it was.
So when I then call $("#selectId").val() I get the old one value.
What's the appropriate way to initialize dropdown control and then have an ability to freely change it's value in browser or by jQuery?

This seems to be working fine (Firefox on Ubuntu):
HTML
<select id='selectId'>
<option value='1'>Option 1</option>
<option value='2' selected='selected'>Option 2</option>
<option value='3'>Option 3</option>
</select>
JS
$('#selectId').change(function() {
var opt = $(this).find('option:selected');
console.log([opt.val(), opt.text()]);
});
var opt_sel = $('#selectId option:selected');
opt_sel.val(99);
opt_sel.text('Changed option');
If you select the options, you'll see that it will print the changed version. Working example:
http://jsfiddle.net/vm4Q8/
Hope this helps.

It should work fine. May be you are not setting it correctly.
You should pass the value of the option to val() method to select it.
E.g $('#selectId').val('1'); will set first option as selected and afterwards calling $('#selectId').val() will give you 1 and not 2.
Here is the working example http://jsfiddle.net/3eu85/

You can get the val of the option selected, instead of the select
$('select#selectId option:selected').val();
Docs: http://api.jquery.com/val/

Which browser are you trying this in? Your code looks fine to me, and appears to be working in this jsFiddle.

please use this code instead,
$('#selectId option:selected').val();

Can I apply the required attribute to <select> fields in HTML?

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');