Develop Reference

vJS or jQuery -- set / get simplified selected option

I'm having trouble getting and setting the "simplified" selected value of a select using jquery or vanilla js. i.e. <option value="foo" selected> vs. <option value="foo" selected="selected">.
Below only works if the option is selected like below, but all the programmatic ways to set the value of a select option I have tried result in <option value="value" selected="selected">. I need to set and get the simplified selected.
const sortBySelect = document.getElementById('sortBy');
let currVal = sortBySelect[sortBySelect.selectedIndex].value;
console.log(currVal);
<select id="sortBy">
<option value="title" selected>Title</option>
<option value="date">Date</option>
<option value="name">Name</option>
</select>
I've tried these and all the permutations I could find on Stack:
$(`#sortBy option[value='${storageValue}']`).attr('selected', true);
$(`#sortBy option[value='${storageValue}']`).prop('selected', "selected");

Instead of using attr() or prop() functions, just directly set the select value by using the val() function
$('#sortBy').val('${storageValue}');

Toggling ng-selected

I am trying to toggle ng-selected options in Angular, but am running into some difficulty. Here's what I'm trying:
<select ng-model="datacut.ages" multiple>
<option value="" disabled="disabled">Please Select</option>
<option value="0-15" ng-click="toggleSelect(datacut, '0-15')" ng-selected="datacut.ages.indexOf('0-15') !== -1">15 and Younger</option>
<option value="16-19" ng-selected="datacut.ages.indexOf('16-19') !== -1">16 - 19</option>
<option value="20-24" ng-selected="datacut.ages.indexOf('20-24') !== -1">20 - 24</option>
</select>
Controller:
$scope.toggleSelect = function(dc, str){
dc.ages.splice(dc.ages.indexOf(str), 1);
//e.currentTarget.selected = !e.currentTarget.selected;
};
The problem is that when I click on an option gets selected on mousedown, and on release gets unselected. The commented out code also does the same thing.
I feel like this should have a simple solution, but I can't really figure out an elegant solution.
Any help would be much appreciated.
Edit: For clarification - I need to be able to have nothing selected, so clicking a single selected element needs to unselect it. I also need to be able to select multiple options.

Your are using ng-model which does the magic for you. So ng-click and ng-selected is not necessary. See my working fiddle
<select ng-model="datacut.ages" multiple>
<option value="" disabled="disabled">Please Select</option>
<option ng-value="'0-15'">15 and Younger</option>
<option ng-value="'16-19'" >16 - 19</option>
<option ng-value="'20-24'" >20 - 24</option>
</select>

It looks like you want to remove the selected age from the ages model. Then you need to use the ng-change directive. And remove the ng-click or ng-selected. But leave the ng-model to access the value on the method that remove the selected item.
See my plunker
<select multiple name="ages" unseletable forbiden-opt="datacut.MIN_AGE" ng-model="datacut.chosenAge">
<option value="" disabled="disabled">Please Select</option>
<option ng-repeat="age in datacut.ages" value="{{age}}">
{{age}}
</option>
</select>
EDIT: This should be made in a directive because you need to update the option html to unselect the option.

Jquery, read data attribute from all divs that match proper pattern

I have html code that looks like this:
<select id="invoice_line_items_attributes_0_product_id" class="select required form-control" name="invoice[line_items_attributes][0][product_id]">
<option value=""></option>
<option value="34" data-price="123.0">asdsad</option>
<option value="35" data-price="123213.0">asd</option>
</select>
<select id="invoice_line_items_attributes_1_product_id" class="select required form-control" name="invoice[line_items_attributes][0][product_id]">
<option value=""></option>
<option value="31" data-price="1223.0">asdsad</option>
<option value="32" data-price="12333213.0">asd</option>
</select>
And now I want to iterate through all this selects and when one of this change this value alert this date-price attribute. I trying to do this with the following code:
$('[id*="product"]').each ->
$(this).change ->
alert $(this).attr("data-price")
But It gaves me undefined instead of this data-price value.

Three things:
1) You do not need to iterate over select element individually and then bind the even. Selector will do that on its own for matched elements.
2) You need to find selected option and then get data price value.
3) use .data() instead of using .attr() to get data attribute values.
Use:
$('[id*="product"]').change(function(){
alert($(this).find('option:selected').data('price'));
});
Working Demo

That is because your select doesn't have data-attr, I think you want the selected options data-attr.
And to get data-attributes jquery provides .data function.
do like bellow.
$('[id*="product"]').change(function(){
alert($(this).find(':selected').data('price'));
});
DEMO

Selected only one values

i have:
<select id="number" name="number">
<option value=""></option>
<option value="1">01</option>
<option value="2" selected="selected">02</option>
<option value="3">03</option>
<option value="4" selected="selected">04</option>
<option value="5">05</option>
</select>
and next with jQuery i use for example:
$('#number').val(1);
but this add next value - 1 and now i have:
<select id="number" name="number">
<option value=""></option>
<option value="1" selected="selected">01</option>
<option value="2" selected="selected">02</option>
<option value="3">03</option>
<option value="4" selected="selected">04</option>
<option value="5">05</option>
</select>
what i must use with:
$('#number').val(1);
that all others value can be not selected? So i would like - if i set new val then all others values can be reset. Maybe use each for reset, but how?
I know - this should be multiselect = false, but this is not my code - i must use this this jQuery.

Are you using a multiple select? Because the HTML you've added indicates that you're not. If you're not working with a multiple select, then your HTML with several selected="selected" doesn't make any sense.
If you are working with a multiple select, then setting .val() should clear the other selections. (Demo). If in some weird browser it isn't, you could try manually resetting the select:
$('#number option').prop('selected', false).val(1);
If clearing the current selection is not what you want, then you should consider setting the selected property manually, rather than using .val()
$('#number option[value=1]').prop('selected', true);
Demo

Modification to jQuery script to let me choose which is the default value of the select list on page entrance

I make use of Mobiscroll jQuery script for a prettier input by the users. On page load, the first option of the select list is shown as selected. What should I add to the existing code that on page entrance, the (for example) 3rd value is shown as the default?
I tried selecte="selected" but it does not work.
this is the jQuery script
$(function(){
$('#city').scroller({
preset: 'select',
theme: 'android-ics',
display: 'inline',
mode: 'scroller',
});
});
and here is the options of the select box
<select id="city" class="cities" data-role="none" name="City">
<option value="">All</option>
<option value="1">Atlanta</option>
<option value="2">Berlin</option>
<option value="3">Boston</option>
</select>

You can easily set the value from jQuery by doing this:
var defaultValue = 3;
$("#city").val(defaultValue);​
"3" here represents Boston from your drop down list, here's a fiddle for proof:
http://jsfiddle.net/6mj8n/5/

Using $('#city').val('3'); will put The third option 'Boston' as selected for example

In this case, I think the vanilla DOM method is what I'd go with:
$('#city')[0].options.selectedIndex = 3;
It should be mentioned that this and other solutions should be placed before you initialize mobiscroll. Working demo with mobiscroll: http://jsfiddle.net/DCaHK/1/
...On further thought, your first suggestion of adding selected to the option should have worked. Updated my demo to do exactly that. Autocomplete could prevent this from working properly in some browsers, so it's possible your issue is simply that you need to turn autocomplete off:
<form autocomplete="off">
<select id="city" class="cities" data-role="none" name="City">
<option value="">All</option>
<option value="1">Atlanta</option>
<option value="2" selected>Berlin</option>
<option value="3">Boston</option>
</select>
</form>