We Keep Coding

How do I get all select elements that do not have an option selected using jQuery?

How do I get all select elements that do not have an option selected using jQuery?
<select id="one">
<option value=""></option>
<option value="test"></option>
</select>
<select id="two">
<option value=""></option>
<option selected value="test"></option>
</select>
What would the jQuery selector be that would return just #one based on no selection?

Refer to https://stackoverflow.com/a/63588880/3499595 if your case is not similar to OP (default value is "")
$('select option:selected[value=""]').parent()
Selects all the :selected options of all the select elements
Checks if the selected option has a value of "", which in your case means no option is actually selected.
Returns the parent (which would be a select)

You can take advantage of jQuery's .parent() and .not() functions. See below:
// selector for all 'select' elements with any option below it
var all = $("select>option").parent(); // alternative $("select")
// selector for all 'select' element with a selected child
var selected = $("select>option[selected]").parent();
// the subtraction set "all - selected" achieved by `not`.
var unselected = all.not(selected);
Note that jQuery's parent takes care of removing duplicates from a set of parents of child elements.
JsFiddle here.

The accepted answer gives all select elements with a selected option whose value is empty(""), which does answer the question in regard to the OP's sample HTML, where options with empty values are given, but it doesn't really answer the title question.
There is a difference between selecting an option with an empty value, and not selecting any option at all.
To select all select elements with no option selected, use
$('select').not(':has(option:selected)')

If you have jquery library then try
$('select option').filter(function(i,d){return !d.hasAttribute("selected")});

Deselect last selected option in multiple select with jQuery

Well, i have a change handler to add values into an Array or remove values in order to have only the selected ones in there. But when the last element is selected i cannot remove it from the multiple select as the change event does not fire!! Anyone having the same problem?
Thanks beforehand!

If you're doing what I think you're doing, there is no reason change shouldn't fire:
<select id="list" multiple="yes">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
var values = [];
$('#list').change(function(evt) {
values.push($('#list option:selected').remove().val());
console.log(values);
});
Thus, you must not be doing what I think you're doing.
Unless you have the last value selected, in which case you can't select it again. If you need to process clicks on selected options, then use the click handler, not the change handler.

jQuery move specific option top the top of select (drop down)

I am basicly trying to take a specific option from select and move it at the top of the list. What I am trying to do now is this.
$("select[name=list]").find('option[value="car"]').insertBefore($("select[name=list]").find('option:eq(1)'));
and for some reason it executes twice leaving two options at the top
<option value="car">Car</option>
<option value="car">Car</option>
Not sure what am I doing wrong, maybe someone knows?
thank you.

From the jQuery Documentation:
If an element selected this way is inserted into a single location elsewhere in the DOM, it will be moved before the target (not cloned) and a new set consisting of the inserted element is returned.
[..]
If there is more than one target element, however, cloned copies of the inserted element will be created for each target after the first, and that new set (the original element plus clones) is returned.
So, there is a clue! My guess is that your selector, is too much embracing, and you are selecting more than one element... Even in another select list in the document.
You may provide a little more HTML code for your example, but let me show how I would do it...
Html
<select id='MyNiceList'>
<option value='my_option_1'>First Option</option>
<option value='my_option_2'>Second Option</option>
<option value='my_option_3'>Third Option</option>
</select>
Js
$('#MyNiceList option[value="my_option_2"]').insertBefore('#MyNiceList option[value="my_option_1"]');
If you pay attention on the selector that I used, I eliminate any possibility of select more than one element, so, the rule on the second part I quoted is obeyed.
Example:
http://jsfiddle.net/sASCg/1/
I hope I helped you on my first Answer! : )

There may be 2 problems
If you insert a new option, then you simply may have 2 options with the same values, as you did not remove it.
The first item is numbered "0" not "1"
http://jsfiddle.net/4kHuA/
var $el = $("select[name=list]").find('option[value="car"]');
$("select[name=list]").find('option[value="car"]').remove();
$("select[name=list]").find('option:eq(0)').before($el);

:eq(1) will select the second element rather than the first element. Other than that, the code you've posted should work fine:
var $select = $("#mySelect");
$mySelect.find('option[value="car"]')
.insertBefore($mySelect.find('option:eq(1)'));
http://jsfiddle.net/B5W4B/

try this
$("select[name=list]").find('option[value="car"]').prependTo($("select[name=list]"));
$("select[name=list]").val('car')

How to copy selection from one select to another?

I have two select elements, with same number of options, and same values for these options, but different (translated) texts.
How can I copy selection from one to another?
From user perspective, if someone will select "red" (value=1) and "brown" (value=5) in English select, I want "rubrum" (value=1) and "rufum" (value=5) to appear selected in Latin select.
For <input> tags, this works:
$(this).closest('.common-parent')
.find(".common-identifier")
.not(this)
.val( $(this).val() );
Sadly, this omits <select> tags.
I found many ways to copy items, but can't find a way to copy actual selection.
Fiddle here: http://jsfiddle.net/e53aJ/8/
Edit: I'd love it to work both for single and multiselect, if possible. I know at first I did not reflect that in my fiddle, sorry.

I saw your html markup there you supplied all option values to 1 that should be in order like below:
Html:
<div class=".common-identifier">
<select name="english" class=".common-identifier">
<option value=1>red</option>
<option value=2>green</option>
<option value=3>yellow</option>
<option value=4>blue</option>
<option value=5>brown</option>
</select>
<select name="latin" class=".common-identifier">
<option value=1>rubeum</option>
<option value=2>viride</option>
<option value=3>flavus</option>
<option value=4>caeruleo</option>
<option value=5>brunneis</option>
</select>
</div>
jQuery:
$('select[name="english"]').on('change', function () {
$('select[name="latin"]').val(this.value);
});
Fiddle

<select> elements have a property selectedIndex that indicates which of their options is selected.
If you get the selectedIndex of the one <select>, then set the selectedIndex of the other <select> to that, you should get the result you're looking for.
However, if your <select> accepts multiple selections (as your question implies), then it's a bit more tiresome. You have to loop through the <option> elements and check each one to see whether it's selected property is true.
(This is why jQuery's popular: the JavaScript DOM interface frequently sucks.)

$(this).closest('.common-parent')
.find(".common-identifier")
.not(this)
.attr('selectedIndex', $(this).attr('selectedIndex'));

How to refresh default display option in select by javascript or jquery?

html code:
<select>
<br>
<option>1</option><br>
<option>2</option><br>
</select>
This select will default display the first option item(display 1).
Now i want to change select to display the second item by jquery when dom is ready, but i tried several times, all failed.The following is my attempt:
$('select').prop('selectIndex', 1);
$('option').eq(1).attr('selected', 'selected');
$('option').eq(1).prop('selected', true);
default set select's style to 'display:none' in html code, then try above three ways and finally invoke $('select').show()
Maybe, i am only setting the dom value, not tell browser to refresh 'select'.
Do you konw the other way to refresh default display option in select?

You have to add values to your options from select.
<select>
<option value="1">First</option>
<option value="2">Second</option>
</select>
Then, just set the value "2".
$("select").val("2");
Or, you can do this simply setting the second value from select.
$("select").val(2);
See the working example here.

This is enough
$("select").val(2);

i think you want to select option 2 when page is load.
<select>
<option>1</option>
<option selected="selected">2</option>
</select>