I'm running protractor e2e tests on an angular page and I wan't to check some dropdown boxes for their selected options. I got the following html code generated from angular:
<select class="ng-pristine ng-valid ng-touched" id="idxyz" ng-model="model" ng-options="xxx">
<option selected="selected" value="object:null"></option>
<option label="Steuerung 1" value="number:1">Steuerung 1</option>
<option selected="selected" label="Programme" value="number:2">Programme</option>
<option label="Steuerung 2" value="number:3">Steuerung 2</option>
</select>
And this is the protractor code that I use to get the selected option.
expect(element(by.css("select[ng-model='model'] option[selected='selected']")).getAttribute("value")).toBe("Programme");
As you might have noticed - there are two options with selected='selected'.
This is only the case when running the tests with protractor. When doing the same things by hand, only the truly selected option has the attribute selected='selected'.
Can anyone explain why this happens? The css selector should only return one option element because only one can be selected. But since there are two with the selected attribute - protractor gives me the following warning:
WARNING - more than one element found for locator By.cssSelector("select[ng-model='model'] option[selected='selected']") - the first result will be used
The first result is the empty option which is actually not selected.
Setup to run the tests:
angular: 1.4.4
grunt: 0.4.5
protractor: 2.5.1
grunt-protractor-runner: 2.1.0
To workaround the problem, you my additionally check the value to start with number:
select[ng-model=model] option[selected=selected][value^=number]
Or, we may check the value not equal to object:null:
select[ng-model=model] option:not([value="object:null"])[selected=selected]
Note that to make dealing with select-option easier, consider using a custom wrapper, see:
Select -> option abstraction
Related
I'm using a combobox (select) to display countries. I doing this using Bootstrap.
This is the code
<select class="form-control form-control-user" id="inputCountry" name="country" placeholder="Country">
<option value="NL">Netherlands</option>
<option value="BE">Belgium</option>
<option value="LX">Luxembourg</option>
<option value="GR">Greece</option>
<option value="NO">Norway</option>
</select>
When I go to my browser, my combobox is empty. When I click it I can see the entries. When I select an entry, nothing shows in the combobox. When I try to echo the value of the combobox, I get the value, so it's a visual issue.
removing 1 of the classes (form-control or form-control-use) will fix this, but the design I want gets lost.
Is there any way to fix this?
I have tried your code block and it was working without a problem.
This is the JSFiddle link which I have done some modificatoins:
https://jsfiddle.net/mw5904uf/
Here, I have created form-control-user css class. I am not sure that this is what you want. Anyhow make sure you have linked css and js files correctly as Charlene said.
In addition, since your placeholder didn't work, I have modified that by adding another option.
I'm developing a web application using Angular 6. I used the library bootstrap-select (by Silvio Mureto) to implement a combo-box (with additional possibilities to customize). I have a problem: when I set the multiple attribute, graphically the behavior is right (all the selected strings appear inside the input box, together). The problem is that the value connected with my ngModel (used to get the data with 2-way binding) it's always only one (and always corresponds to the first value displayed inside the box, although there are other values in it!).
This is the code:
<select
class="form-control selectpicker show-tick"
data-width="200px"
multiple
title="my_title"
name = "name"
[(ngModel)] = "value"
(ngModelChange) = "onChange($event)"
>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
<option value="2">Value 3</option>
</select>
This is the result (graphically it's exactly as I would like):
But, as you can see, with each click to add a new value, the value object is always and only associated with 1 (because Value 1 is the first in the list and doesn't seem to matter that the other two values are present).
The console log (object value):
How can I solve this problem?
You change the value attribute of the options?
<option value="1">Value 1</option>
<option value="2">Value 2</option>
<option value="3">Value 3</option>
Currently you have 3 option elements all with value="1". So your output is exactly what you told angular to select.
edit: as you edited the question, we probably need to see the onChange method to help understand the problem better
I'm developing a web application using Angular 6. I used the library bootstrap-select to implement a combo-box (with additional possibilities to customize). I have a problem: when I set the multiple attribute, graphically the behavior is right (all the selected strings appear inside the input box, together). The problem is that the value connected with my ngModel (used to get the data with 2-way binding) it's always only one (and always corresponds to the first value displayed inside the box, although there are other values in it!). This is the code:
<select
class="form-control selectpicker show-tick"
data-width="200px"
multiple
title="my_title"
name = "name"
[(ngModel)] = "value"
(ngModelChange) = "onChange($event)"
>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
<option value="2">Value 3</option>
</select>
This is the result (graphically it's exactly as I would like):
But, as you can see, with each click to add a new value, the value object is always and only associated with 1 (because Value 1 is the first in the list and doesn't seem to matter that the other two values are present). The console log (object value):
How can I solve this problem?
The problem is that you are using a multi select version for jquery. You could do some tricks to make it work, but it will not be quite elegant
Also why use jquery in angular? You always have to try to avoid it
Angular handles the bindings in another way.
I recommend you use this library ng-select
Demo
In this simple jsfiddle (code below), I have a regular <select>, not a <select multiple>, with two options having the selected attribute. In Chrome 39, I see "d" selected. Apparently the behavior is to select the last of the "selected" options, which seems logical. Is this a behavior I can count on across browsers?
<select>
<option value="a">a</option>
<option value="b" selected>b</option>
<option value="c">c</option>
<option value="d" selected>d</option>
</select>
A select element whose multiple attribute is not specified must not
have more than one descendant option element with its selected
attribute set.
source w3.org
So it's not valid HTML and therefore the browsers' behavior is not predictable. If you've create these selected options via Javascript, you should maybe handle your desired behavior via JS as well.
I'm having a kind of freak error in my MVC4 proyect. While trying to validate every page with the W3C Markup Validator I found out that one of the selects in the one page is invalid, for obvious reasons (missing the starting < for Wester Sahara)
<select id="PER_Citizenship" name="PER_Citizenship">
<option value="">Please select</option>
<!-- more options -->
<option value="we">West Bank</option>
option value="eh">Western Sahara</option>
<option value="ye">Yemen</option>
<!-- more options -->
</select>
It gets interesting because the select is being built by the Html.DropDownListFor method. Furthermore, I'm using the same object as parameter to fill the list for 5 more selects in the same page and they all render properly.
#Html.DropDownListFor(model => model.PER_Citizenship, (SelectList)ViewBag.Countries)
This is not the first or the last time in the page the ViewBag.Countries is used, so I'm at a loss to find out why this happens.
Has anyone experienced this issue ever? Did you come up with some solution?
Thanks a lot!