I am trying to preselect (set as default) value from Angular 5 drop down.
There are three values and I am trying to set the second one with this code but it doesn't work. I can't make any changes in the component, only in the template.
<select [(ngModel)]="declaration.media" name="media" (change)="onChangeMedia()" class="form-control form-control-sm" required>
<option *ngFor="let media of mediaArray" value="{{media.value}}" selected = "{{media.value == '02'}}">{{media.text}}</option>
</select>
UPDATE: if I remove [(ngModel)] then it works, but no two way binding.
<select>
<option value="" selected disabled hidden>Choose here</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
Related
I am writing the following code:
<select
formControlName="abc"
type="text"
class="form-control"
id="abc"
aria-describedby="abcHelp"
[(ngModel)]="optionValue"
>
<option value="" disabled selected>
Select Yes/No
</option>
<option value="true">Yes</option>
<option value="false">No</option>
</select>
It works fine without [(ngModel)]="optionValue" but I need to make it work with NgModel so that I can access values of options.
UPDATED
select input's selected option is not working if I use v-model on select.
<p class="topics">fruits</p>
<select class="select" v-model="selectFruit">
<option selected value="">--all--</option>
<option :key="index" :value="item" v-for="(item,index) in fruitList">{{item}}</option>
</select>
if I don't use v-model, then selected is working. But I need that v-model bind for filter my array. But it looks like I can't use v-model and selected at the same time.
Use selected attribute
https://www.w3schools.com/tags/att_option_selected.asp
<select class="select" v-model="searchCity">
<option value="" selected>--全部--</option>
<option :value="item" v-for="item in uniqueCity">{{item}}</option>
</select>
Adding a bonus to the above answer, if you want to have a default placeholder but not a valid value (Like "Select country here") you can do it like this:
<select>
<option value="" selected disabled hidden>Select country here</option>
<option value="1">Bulgaria</option>
<option value="2">Serbia</option>
<option value="3">Cyprus</option>
</select>
I want to disable and enable a select, using angular based on a condition.
<select [disabled]="!isContinentSelected" class="form-control" formControlName="country">
<option value="">Select Your Country</option>
<option *ngFor="let country of countries" value="{{country.id}}">{{country.name}}</option>
</select>
isContinentSelected returns true or false. But the is always enable even the condition is false. Im using Angular 5. How can I achieve this?
<select [attr.disabled]="isContinentSelected ? '': null" class="form-control" formControlName="country">
<option value="">Select Your Country</option>
<option *ngFor="let country of countries" value="{{country.id}}">{{country.name}}</option>
</select>
Please try with this code.
This works in my case.
I'm using VBA to open a website, login, and navigate to a certain page. There is a dropdown with 8 options.
I used this code to change the dropdown to the value I want, but it always reverts back to the default as I continue. How do I lock this change in?
Set Element = IE.Document.getElementsByName("date_range")
Element.Item(0).Value = "custom"
Here's the page code:
<div class="SelectInput">
<select class="SelectInput-select" name="date_range">
<option value="all_time">All Time</option>
<option value="today">Today</option>
<option value="yesterday">Yesterday</option>
<option value="this_month">Month to date</option>
<option value="last_month">Last Month</option>
<option value="this_year">Year to date</option>
<option value="last_year">Last year</option>
<option value="custom">Between...</option>
</select>
<div class="SelectInput-arrows">...</div>
</div>
Thanks,
you need to set the selected attribute .... ref: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_option_selected
I'm writing a Selenium script that containing a drop down list.
<select id="seats" class="form-control" name="seats">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="3">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">22</option>
<option value="23">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
</select>
I've looked several answers in stack overflow to select a value form dropdown box and every time I failed. Even tried to get xpath from Selenium IDE. in that case I got same Relative XPath to both dropdown and the value.
Here is the code I'm currently using.
driver.findElement(By.id("seats")).click();
driver.findElement(By.xpath("//form[#id='side-form']/div/div/div/div/div[3]/div/select")).click();
Here what i need to select is 4. but, it selecting 1.
Can someone tell me how to select 4 from my dropdown. Any help would be appreciated.
Thanks in advance. :)
It is a bit awkward that your dropdown has 2 options with the same value. Anyway, here is one possible XPath which will return the last option of certain value, from dropdown with id equals 'seats' :
driver.findElement(By.xpath("//select[#id='seats']/option[#value='3'][last()]")).click();
Please try below sample
new Select(driver.findElement(By.id("seats"))).selectByValue("4");
Edit
WebElement select = driver.findElement(By.id("seats"));
List<WebElement> allOptions = select.findElements(By.tagName("option"));
for (WebElement option : allOptions) {
if(option.getText().equals("4")){
option.click();
}
}