We Keep Coding

Default blank option on <select> for Safari

I'm trying to make a <select> where the first <option> is empty, it is not visible in the dropdown and not selectable.
I've been researching for like 4 hours. I saw so many working options but the thing is that none of them (or at least what I've found) are working on Safari.
This is my code:
<select class="custom-select" formControlName="subindustryName">
<option *ngFor="let subindustry of subIndustries" [value]="subindustry.value">
{{subindustry.label}}
</option>
</select>
I'm not using jQuery.

would this work for you? you can set style properties for an option and disable the field so it's not selectable anymore. this question seems to have been answered with another post. default empty option.
<select>
<option disabled selected value style="display:none"></option>
<option value="one">one</option>
<option value="two">three</option>
</select>

Just add option with value undefined to force angular to select that value. like below
<select class="custom-select" formControlName="subindustryName">
<option value="undefined"></option>
<option *ngFor="let subindustry of subIndustries"
[value]="subindustry.value">{{subindustry.label}}</option>
</select>
and with if you want to it to be not selectable then add 'disabled' attribute with that.
EDIT AS PER COMMENT
so whatever you pasted in question should work.
Here is my code snippet which is working..
<div class="form-group">
<label class="col-md-3 control-label">Gender</label>
<div class="col-md-3">
<select id="gender" class="form-control" [(ngModel)]="userModel.gender" name="gender" required >
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
</div>
Just try with template driven approach for 'subindustryName' and check.

<option disabled selected value>Select Option</option>
<option value="one">one</option>
<option value="two">two</option>
In both Safari and Chrome, default disabled selected value is this.

if you use like.
<select>
<option> Select Option </option>
<!-- replace above code with -->
<option value='' selected> Select Option </option>
</select>
Hope this will work.

Set value of select to first child of that select

My code dynamically generates the options for the select element but the exact value of the options are unknown at the moment of creation.
So was playing around to set the selected value of my select element to the first child but was unable to do so in 1 line.
I was able to it in 2 lines but I was wondering if something shorter is possible.
<select id="selectElement">
<option value="1">Optie 1</option>
<option value="2">Optie 2</option>
</select>
$("#selectElement").val($(this).children(":first").val());

It's worth noting that most browsers will automatically select that first option for you.
But if you need to do it for some reason: You're not far off at all, but this doesn't come from the first part of that line. Instead:
var select = $("#selectElement");
select.val(select.children(":first").val());
Or I find this simpler:
var select = $("#selectElement");
select.val(select[0].options[0].value);
Or using the selected property of the option instead:
$("#selectElement")[0].options[0].selected = true;
// or with more jQuery
$("#selectElement > option:first").prop("selected", true);

One method is using .eq() selector.It reduce the set of matched elements to the one at the specified index.
Please try this:
$(selectElement).val($('#selectElement option:eq(0)').val());
See reference here
If you want the shortest method please try this:
$("#selectElement").prop("selectedIndex", 0);

If you have only one element, you should find it (with # id selector), and the also use his selector to find the children.
Otherwise you could use (in case you also have more elements) use a class, and iterate it (the second script in the snippet)
edit
Without js, you could simply use the selected property of option to set as default when page loads.
$("#selectElement").val($("#selectElement").children("option:first").val());
$(".selectElement").each(function() {
$(this).val($(this).children("option:first").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectElement">
<option value="1">Optie 1</option>
<option value="2">Optie 2</option>
</select>
<select class="selectElement">
<option value="21">Optie 21</option>
<option value="22">Optie 22</option>
</select>
<select>
<option selected value="321">Optie 321</option>
<option value="322">Optie 322</option>
</select>

You can achieve this by using :first
$(document).ready(function () {
$("#selectElement").val($("#selectElement option:first").val())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="selectElement">
<option value="1">Optie 1</option>
<option value="2">Optie 2</option>
</select>

No need to use JavaScript to set selected the first element of the options because html will do it for you:
<select id="selectElement">
<option value="1">Optie 1</option>
<option value="2">Optie 2</option>
</select>

jQuery: find the <optgroup> for a selected value in a <select> element

I have a dropdown menu with different option groups. If someone selects an option, how can I check which optgroup it belongs to? For example if 'ferrari' were selected, how would you determine which optgroup it belongs to?
Feel free to use jQuery or raw javascript.
<select name="testSelect">
<optgroup label="fruits">
<option value="apples">Apples</option>
<option value="oranges">Oranges</option>
<option value="pears">Pears</option>
</optgroup>
<optgroup label="cars">
<option value="ford">ford</option>
<option value="toyota">toyota</option>
<option value="ferrari">ferrari</option>
</optgroup>
</select>

You can do this using jQuery:
$('select').change(function() {
var selected = $(':selected', this);
alert(selected.closest('optgroup').attr('label'));
});​
See a live example here: http://jsfiddle.net/jkeyes/zjLCp/1/
Update: Yes you could use parent http://jsfiddle.net/jkeyes/zjLCp/2/
alert(selected.parent().attr('label'));

Well, in pure js:
this.options[this.selectedIndex].parentNode.label
Not a single function call and less code to boot. :-)

Select/disselect only a single option on click in a select (with the multiple attribute) form element

I'm trying to modify a select element with the 'multiple' attribute to only select/disselect the one option selected, instead of disselecting all options and selecting the one target.
Let's say we got this:
<select name="somename[]" multiple="multiple">
<option selected="selected" value="val1">Val1</option>
<option selected="selected" value="val2">Val2</option>
<option value="val3">Val3</option>
</select>
What I want to happen when you select an option is:
<select name="somename[]" multiple="multiple">
<option selected="selected" value="val1">Val1</option>
<option value="val2">Val2</option> <!-- Disselected -->
<option value="val3">Val3</option>
</select>
Instead of:
<select name="somename[]" multiple="multiple">
<option value="val1">Val1</option>
<!-- All other values are disselected except the one option selected -->
<option selected="selected" value="val2">Val2</option>
<option value="val3">Val3</option>
</select>
I hope that made sense. If not please let me know.
I've tried using jQuery and hooking a click function on the select element, hoping to intersect the selected option but that failed. Appearently the selections are made before the event is triggered.
Thanks.

Get the value of select jquery

<select id="my-select">
<option value="1">This is one</option>
<option value="2" selected>This is two</option>
...
</select>
Is there a way to get the text value of the selected option?
$('#my-select').val();
gives me 2, i want to get This is Two instead.
How?

What you want is
Get the selector for finding the selected option in the select box
Use .text() on the selector.
$('#my-select option:selected').text();
See a working demo