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>

Materlialize CSS - Select Componenent - Setting default value with Javascript

I have a tough time with Materialize CSS and Select compoment.
Code goes like this:
<select id="selectCompId">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
When i visit the form i always get either value 1, 2 or 3 based on some DB query. Now, if i get 2 i want to set selected on option number 2 as initial selection. I'm having issues doing so.
Tried doing this:
document.getElementById('selectCompId').value = '2' but it seems like it doesn't work with this materialize component or i'm doing it wrong.
Whole code can be found here:
https://jsfiddle.net/536Lu1xe/1/
Expected result:
Initial value set to desired value (let's say 2 in this case).
Solution -> https://jsfiddle.net/536Lu1xe/2/
At the bottom, under script tags:
var elem = document.querySelector('#selectCompId');
var instances = M.FormSelect.init(elem);
document.querySelector('#selectCompId option[value="2"]').setAttribute('selected', 'selected');
M.FormSelect.init(elem);

If I understand correctly, you want to programmatically select an option in a select box.
In order to do that, we have to select all the options in a select box and select the desired option. The challenge here is to define the option that needs to be selected. In this case, I'm using the index for this.
Let's see how that looks like in code.
let n = 1; // the index of the option that needs to be selected. In this case, we want to select Item 2 (the option at index=1)
// the following line will select the <select/> on the page
const select = document.querySelector('select');
// now we have to loop through all options and select the one at Index=1
select.querySelectorAll('option')[n].selected = true;
<select>
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>

You need to add selected attribute to select:
<select>
<option value="1">Option 1</option>
<option value="2" selected>Option 2</option>
<option value="3">Option 3</option>
</select>
EDIT:
You'll also need to re-initialize Select after updating the value:
const elem = document.getElementById('select_id');
M.FormSelect.init(elem);

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

Using jQuery multiselect to add values to url hash

The following multi-select control needs to be used to update a url hash containing a comma-separated list of ids.
<select id="options" multiple>
<option id="1">Option 1</option>
<option id="2">Option 2</option>
<option id="3">Option 3</option>
<option id="4">Option 4</option>
<option id="5">Option 5</option>
<option id="6">Option 6</option>
<option id="7">Option 7</option>
</select>
In the example below, Options 2, 3, and 4 are selected in the multi-select control. Selecting and un-selecting options in the multi-select control should update the url hash accordingly.
http://localhost/index#options=2,3,4
I have created a fiddle with the multi-select control but do not know how best to approach the url hash change. I have tried using an href to change the hash but that is not supported within an option tag, and does not provide the logic needed to update the hashes accordingly.
Fiddle
Please let me know if I provide any additional information.

Part of your issue is that in JSFiddle you won't be able to see the hash.
That said if you listen for changes on the <select> you can concatenate the array of values into a string using join() and then set this as a has using window.location.hash.
You could so something like this (based on #popnoodles code)
$( '#options' ).on( 'change', function() {
window.location.hash = $( this ).val().join( ',' );
});

Working demo
Ok without interfering with any of that plugin code
First you need to address your options
use this: <option value="1">Option 1</option>
not this: <option id="1">Option 1</option>
Then this jQuery will do what you want.
$('#options').on('change', function(){
var val=$(this).val();
if (val) hash=val.join(','); // join fails if .val() is null (nothing selected)
else hash='';
window.location.hash=hash;
});

on option item is selected

EDIT:
I forgot http:// on the links. This is not my problem. I'll fix the question...
i have some options, like this:
<select class="mySelect">
<option value="http://www.url1.com">Url 1</option> <!--Default displayed--->
<option value="http://www.url2.com">Url 2</option>
<option value="http://www.url3.com">Url 3</option>
</select>
To this i have a jquery listener, looks like this:
$('.mySelect').change(function(){
window.location.replace($(this).val());
});
Since this just responds to a change made, i can't be redirected to "www.url1.com". What should i use? I only get suggestions for change on google.
EDIT 2: I've got a bunch of solutions on using a dummy as first option. I also got the other solution of using a button to read the selected option and then redirect, but that's not usable in the project i'm working on, even if these are really good solutions otherwise.
In this case, i want it to listen for usage, even if the change is made to itself, like i'm selecting the first option (that's selected by default) i want it to do something with it - In the case above a redirect. I'll leave it open if someone have a good solution to this problem.

Try putting in an empty valued first option:
<select class="mySelect">
<option value="">Please select...</option>
<option value="http://www.url1.com">Url 1</option>
<option value="http://www.url2.com">Url 2</option>
<option value="http://www.url3.com">Url 3</option>
</select>
You can then amend your jQuery to make sure there is a value before redirecting:
$('.mySelect').change(function(){
var value = $(this).val();
if (value != "") {
window.location.replace(value);
}
});
Example fiddle
Note also that http:// (or whichever protocol you're using) is required on the link values.
Updated
If you would prefer to not have the dummy option, you would need to change the logic to work on button click:
<select class="mySelect">
<option value="http://www.url1.com">Url 1</option>
<option value="http://www.url2.com">Url 2</option>
<option value="http://www.url3.com">Url 3</option>
</select>
<button id="redirect">Go</button>
$("#redirect").click(function() {
window.location.replace($(".mySelect").val());
});

You have to put http:// also
window.location.replace("http://"+$(this).val());

One option can be that you change the first option like
<select class="mySelect">
<option value="select">Select URL</option> <!--Default displayed--->
<option value="www.url1.com">Url 1</option>
<option value="www.url2.com">Url 2</option>
<option value="www.url3.com">Url 3</option>
</select>
or you can use click jquery event for combo box .

<form>
<select class="mySelect">
<option value="" selected="selected">Please Select</option>
<option value="www.url1.com">Url 1</option>
<option value="www.url2.com">Url 2</option>
<option value="www.url3.com">Url 3</option>
</select>
</form>​
$(".mySelect").change( function() {
var n = $(this).val();
if(n != "") {
window.location.assign("http://"+n);
}
});​