Develop Reference

How to trigger select change event from custom placeholder

I have custom placeholder above select control. but the click event is not triggering when I click the custom placeholder, please suggest the best way to achive the select event, with out using jquery.
Please check the code
<div id='placeholder' style='font-size:10px; dispaly:none;background-color:red;position:absolute;left:10px'>
Options
</div>
<select id='selectcontrol' style='background-color:yellow; height:40px'>
<option>Option A</option>
<option>Option B</option>
<option>Option C</option>
</select>

You can wrap your select and placeholder div with another div.
Make select's background transparent
Make sure that your placeholder div is below the select using position:absolute for both of the elements
<div style="background-color:yellow;height:40px;width:100px">
<div id='placeholder' style='font-size:10px;background-color:red;position:absolute;left:10px'>
Options
</div>
<select id='selectcontrol' style='background-color:transparent; height:inherit;width:inherit;position:absolute;'>
<option>Option A</option>
<option>Option B</option>
<option>Option C</option>
</select>
</div>

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>

Why can't I trigger select change event using C# WebBrowser control?

In the javascript I see the following defined:
$('#dropDownId').change(function(){
... do stuff...
});
<select id="dropDownId">
<option value="1">value 1</option>
<option value="2">value 2</option>
<option value="3">value 3</option>
</select>
I've tried using the following code:
webBrowser.Document.GetElementById("dropDownId").SetAttribute("value", "1");
webBrowser.Document.GetElementById("dropDownId").Children[1].SetAttribute("selected", "selected");
webBrowser.Document.GetElementById("dropDownId").InvokeMember("onchange");
I can see the drop down get changed to the right value, but the following never gets executed:
$('#dropDownId').change(function(){
... do stuff...
});
Also, when I look at the properties for "dropDownId" in Chrome, the "onchange" event is null, so how can I invoke the above "change" script for the dropdown?

jquery attaches events to allow for multiple event handlers, that's why onchange property of your select is null.
You can do:
function myChange(){
... do stuff...
}
<select id="dropDownId" onchange="myChange">
...
</select>
or
webBrowser.Document.InvokeScript("myChange");
or
function myChange_Jquery(){
$("#dropDownId").change();
}
webBrowser.Document.InvokeScript("myChange_Jquery");

Why my select onchange is not working?

I have this code:
<select>
<option onChange="filterProducts(this);">Select ...</option>
<option onChange="filterProducts(this);">Samsung</option>
<option onChange="filterProducts(this);">LG</option>
<option onChange="filterProducts(this);">Sony</option>
<option onChange="filterProducts(this);">Philips</option>
</select>
Which should fire a js method but it simply does not fire:
function filterProducts(firedByControl){
alert(fired);
}
For this button, calling the same js method, all works nice:
<button type="button" class="btn" onclick="filterProducts(this)" value="LCD">LCD</button>
Can you please tell me where I am wrong?

You need to put the onchange call on the element.
<select onChange="filterProducts(...);">
<option>Select ...</option>
<option>Samsung</option>
<option>LG</option>
<option>Sony</option>
<option>Philips</option>
</select>

Move the onchange to the select like below,
<select onchange="filterProducts">

I believe that onchange should be an attribute of the <select> element, not each <option>.

do this instead <select onchange="filterProducts(this);">

You need to place the onchange attribute on the select, not on the option.
By the way, you should probably do something like that using JQuery :
$("select").onChange(filterProducts);

Detecting when the user chooses an option from a dropdown

I have a classic HTML select box:
Show:
<select name="show" id="showThreads">
<option value="all" selected="selected">All</option>
<option value="new">Only unread</option>
</select>
Now, I need JavaScript to make an Ajax request when the user changes the selection in the box (without jQuery).
I have tried:
Listening for clicks on the <option> tags, but it won't work for users using a keyboard or a touch device
on an interval, looping though the <option> tags and checking if the selected one changes, but it seemed to trigger even when I simply hovered over the second option.
Is there a way of doing this that will work on all browsers/devices?
Thanks!

Try the "change" event.
document.getElementById("showThreads").onchange = function() {
};

Listen for onChange on the <select> tag.

function yourAjaxCall(something) {
}
<select name="choice1" size="1" onchange="yourAjaxCall(this);">
<option value="one">first</option>
<option value="two">second</option>
<option value="three">third</option>
</select>