Newbe Dev Stack

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 : 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 : 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'}...

Answer : Unfortunately, you need to manually fire the change event. And using the Event Constructor will be the best solution. var select = document.querySelector('#sel'), input = document.querySelector('input[type="button"]'); select.addEventListener('change',function(){ alert('changed'); }); input.addEventListener('click',function(){ select.value = 2; select.dispatchEvent(new Event('change')); }); <select id="sel" onchange='alert("changed")'> <option value='1'>One</option> <option value='2'>Two</option> <option value='3' selected>Three</option> </select> <input type="button" value="Change option to 2" /> And, of course, the Event constructor is not supported in IE. So you may need to polyfill with this: function Event( event, params ) { params = params || { bub...

Answer : You need to put background-color on the option tag and not the select tag... select option { margin: 40px; background: rgba(0, 0, 0, 0.3); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); } If you want to style each one of the option tags.. use the css attribute selector: select option { margin: 40px; background: rgba(0, 0, 0, 0.3); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); } select option[value="1"] { background: rgba(100, 100, 100, 0.3); } select option[value="2"] { background: rgba(150, 150, 150, 0.3); } select option[value="3"] { background: rgba(200, 200, 200, 0.3); } select option[value="4"] { background: rgba(250, 250, 250, 0.3); } <select> <option value="">Please choose</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3"...