Dev Stack Source

Answer : When you use ngModel, the state is handled internally and any explicit change to it just gets ignored. In your example, you are setting the selected property of option , but you are also providing a (void) ngModel to your select , so Angular expects that the state of the select is provided within the ngModel. Briefly, you should leverage on your ngModel instead than setting the selected property: <select name="rate" #rate="ngModel" [(ngModel)]="yourModelName" required> <option value="hr">hr</option> <option value="yr">yr</option> </select> And: yourModelName: string; constructor() { this.yourModelName = 'hr'; } If you don't wish to have a two-way binding, you can set ngModel to the 'default' value and with the template local variable get the selected value: <select #rate ngModel="hr"> <option se...

Answer : The way to change the selected option of a dropdown is to set the dropdown value and then dispatch a change event. You can use this answer as reference: Angular unit test select onChange spy on empty value In your case, you should do something like this: const select: HTMLSelectElement = fixture.debugElement.query(By.css('#dropdown')).nativeElement; select.value = select.options[3].value; // <-- select a new value select.dispatchEvent(new Event('change')); fixture.detectChanges(); You don't have to dispatch a change event. First you need to click on the trigger for your dropdown, i'm assuming it's your selectEl selectEl = fixture.debugElement.query(By.css('#dropdown')) . selectEl.click(); fixture.detectChanges(); After detectChanges your dropdown should be opened. Only after this will you be able to get your options from fixture, because before they where not present in your fixture. The only way I have been a...

Answer : Personally, I prefer this syntax for appending options: $('#mySelect').append($('<option>', { value: 1, text: 'My option' })); If you're adding options from a collection of items, you can do the following: $.each(items, function (i, item) { $('#mySelect').append($('<option>', { value: item.value, text : item.text })); }); This did NOT work in IE8 (yet did in FF): $("#selectList").append(new Option("option text", "value")); This DID work: var o = new Option("option text", "value"); /// jquerify the DOM object 'o' so we can use the html method $(o).html("option text"); $("#selectList").append(o); You can add option using following syntax, Also you can visit to way handle option in jQuery for more details. $('#select').append($('<option>', {value:1, text:'One'}...