Develop Reference

Angular Dropdown menu does not show default value

With regular html select menus, if you create an option element with selected and disabled attributes and give that option text, then that text will display in the select menu by default. Here is basic html:
<select name="myname">
<option selected disabled>Select one...</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
This is what pages looks like:
But in the below isolated code, I demonstrate that Angular is intrusively not showing the option text:
https://github.com/lovefamilychildrenhappiness/DropDownNoShowDefaultValue
// app.component.html
<h1>Select Box does not show default value: </h1>
<app-select-box
[options]="collection"
></app-select-box>
// select-box.component.html
<select
[value]="value"
[disabled]="disabled">
<option selected disabled value="">Select one...</option>
<option *ngFor="let option of options">{{option}}</option>
</select>
What is causing Angular to disrupt the native html behavior of select boxes?

This is because your select value is bound to a variable called value which is undefined initially. As per the html, there is no option with a value of undefined, so nothing gets selected. Your Select one... option has an empty string value. So to fix this, initialize value in your component to an empty string.
value: string = '';

just put the option to be selected in the first place.
<option value="0">value to be selected<option>
<option value="1">next<option>
<option value="2">Continues<option>

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

Select a value in a specific optgroup

I have a select with multiple optgroups
For example
<select id="Numbers">
<option value="0">Select One</option>
<optgroup label="A" id="A">
<option value="123">123</option>
<option value="456">456</option>
</optgroup>
<optgroup label="B" id="B">
<option value="123">123</option>
<option value="456">456</option>
</optgroup>
</select>
Since the values in both optgroups are the same, is there a way to select an option depending on its optgroup?
So I want to select the option with the value of "123" in optgroup with the id of "B"

As you have provided id B. You can use ID selector and Attribute Value Selector
You can use
$('#B option[value="123"]').prop('selected', true)
DEMO

Using jquery you can limit the selection to the children of the optgroup you want. In this case:
$("optgroup#B > option[value='123']").attr("selected", "selected");
Should do the trick.

SORRY, THOUGHT THEY WERE CHECKBOXES. THIS WILL NOT WORK.
Do you mean automatically show it as checked, on loading the page? If so use jQuery:
$("#B").children('.myCheckbox').prop('checked', true);

Select of multiselect not working in JavaScript

I have a multiselect option of JQuery:
<select multiple="multiple" id="add_remove_user_segment" size="5" name="add_remove_user_segment[]">
<optgroup label="test">
<option value="test1">
test1
</option>
<option value="test2">
test2
</option>
<option value="test3">
test3
</option>
</optgroup>
<optgroup label="op1">
<option value="op1">
op1
</option>
<option value="op2">
op2
</option>
<option value="op3">
op3
</option>
</optgroup>
</select>
However whatever I select in javascript the following line of code gives me null! Why is that?
alert($("#add_remove_user_segment").val());
If my question is not clear please let me know!

#my_Selelect isn't the ID of your <select>, it's #add_remove_user_segment
Update:
It's returning null because it's running without anything being selected. Here is a fiddle to demonstrate that you need an onchange event to grab the value (or at the very minimum, try grabbing the value ONLY when something is selected)
http://jsfiddle.net/Dtxjv/1/

add_remove_user_segment has no value until you select one.
Your jQuery runs at document load before a value can be selected.
You need to test for on change or add a delay. demo here
http://codepen.io/lpoulter/pen/ukmwy

Select the first enabled option in a select element

How could I set the value of a select element to the first enabled option?
Say I have html like this:
<select name="myselect" id="myselect">
<option value="val1" disabled>Value 1</option>
<option value="val2">Value 2</option>
<option value="val3" disabled>Value 3</option>
<option value="val4">Value 4</option>
</select>
How could I select the first option which isn't disabled (here it would be val2)?

Try this selecting the first option that is enabled.
$('#myselect').children('option:enabled').eq(0).prop('selected',true);
.children() for finding the list of option that is enabled , .eq(0) choosing the first entry on the list and using .prop() to select the option