I am trying to make a form in Angular with a select box whose values are taken from an array. I also need the form to show inputs based on the value of that select. This is the code:
<select #freq formControlName="freq" class="m-2">
<option disabled>Select</option>
<option value="">Select Option</option>
<option *ngFor="let x of freq_list" [ngValue]="x">{{x}}</option>
</select>
<div *ngIf="freq.value!=''">
{{freq.value}}
<div *ngFor="let x of parameter_config[freq.value]">
<input type="number" formControlName="input1">
</div>
</div>
where freq_list is a simple string[]=['option1',option2',option3'] and parameter_config is a map {[id:string]: string[];}where the id is the a value of freq_list.
And this is the form creation:
form=this.fb.group({
freq:'',
});
Everything works except that the value returned by the selected option is not simply 'option1' but it is preceded by the order in the list (e.g. '1: option1', '2: option2', ...)
Is there something I am missing? How is this the default behavior?
replace ngValue with value
<option *ngFor="let x of freq_list" [ngValue]="x">{{x}}</option>
should be
<option *ngFor="let x of freq_list" [value]="x">{{x}}</option>
Related
I need the value that is obtained from my db is selected. Inspect in html, I see that the value of one of the <option> changes to: selected="selected" but in the select it is not really selected.
Here is my code:
<select chosen class="form-control" name="state" ng-model="product.state" ng-change="updateData()" placeholder-text-single="'Select one'" required >
<option value="">Select one</option>
<option ng-repeat='i in statesList' value="{{i.id}}" ng-selected="i.id == product.state.id">{{i.name}}</option>
</select>
I tried to change the value of ng-model by ng-model="product.state.id" and it works, it stays selected, but of course, the data is not saved later.
statesList is the array of objects that are retrieved from a mongodb database collection.
I have read other similar questions but I can not solve my problem with them. I am new at angular and there are complicated problems for me. What solution is there? How can i fix it?
No need to have ng-change handler.
Try below approach by using ng-options. The model will always have latest selected value.
<select name="state" id="state"
ng-options="option.name for option in statesList track by option.id"
ng-model="product.state"></select>
In my project i have handled selects control with Reactive form, you can try like this
this.testForm = this.formBuilder.group({
"testselectControl": []});
in html
<select id="test1" formControlName="testselectControl"
class="form-control p-0 start-date-input-box ">
<option *ngFor="let val of listValues" [value]="val.id">
{{name.name}}</option>
</select>
when you receive data set value like this
this.testForm .get("testselectControl").setValue(listValues ? (listValues.find((value) => (value.id.trim() ==selectedValueId) : "0");
<select multiple ui-select2="{allowClear: true}" ng-
model="selectedCountries" data-placeholder="Countries">
<option ng-repeat="country in countries" value="{{country.id}}">
{{country.name}}</option>
</select>
<button ng-click="fetch()" class="btn btn-primary pull-right">Apply</button>
the solution of adding priority worked
Using Excel VBA, I wish to scrape values from two Drop-down lists. One is filled with states' names, and another with cities.
I can scrape the states names, but when I try to scrape the cities names I get nothing. The cities list is filled accordingly to state selected.
How can I list every city on second drop-down list for each state in the first list?
This query gives me only state names and the default value of the second list:
Sub ScrapDropDown()
Const URL As String = "http://idebescola.inep.gov.br/ideb/consulta-publica"
Dim XMLPage As New MSXML2.XMLHTTP60
Dim HTMLDoc As New MSHTML.HTMLDocument
XMLPage.Open "GET", URL, False
XMLPage.send
HTMLDoc.body.innerHTML = XMLPage.responseText
Set HTMLDocment = HTMLDoc.getElementById("pkCodEstado")
For i = 1 To HTMLDocment.Length - 1
Set HTMLpkCodMunicipio = HTMLDoc.getElementById("pkCodMunicipio")
For Each HTMLMun In HTMLpkCodMunicipio.getElementsByTagName("option")
Debug.Print i & "-" & HTMLDocment(i).Value & "-" & HTMLDocment(i).innerText & "-" & HTMLMun.Value & "-" & HTMLMun.innerText
Next HTMLMun
Next i
End Sub
Part of HTML with drop list i want to scrape (three dots I removed another unwanted lists), where selected (on site) a state from the first list, without selecting id="pkCodMunicipio" have only one option
<form method="post" name="frm" class="classForm" id="frm">
<label for="pkCodEntidade">Por Código</label>
<div class="divRequired">
</div>
<input name="pkCodEntidade" id="pkCodEntidade" placeholder="Código da Escola" title="Por Código" class="onlynumbers" maxlength="8" tabindex="15" type="text" value="">
<hr>
<label id="lbl">Por área de interesse</label>
<div id="lblDivRequired" class="divRequired" style="display: ;">
</div>
<select name="pkCodEstado" id="pkCodEstado" tabindex="16">
<option value="">UF</option>
<option value="12">ACRE</option>
<option value="27">ALAGOAS</option>
<option value="16">AMAPÁ</option>
<option value="13">AMAZONAS</option>
<option value="29">BAHIA</option>
<option value="23">CEARÁ</option>
<option value="53">DISTRITO FEDERAL</option>
<option value="32">ESPÍRITO SANTO</option>
<option value="52">GOIÁS</option>
<option value="21">MARANHÃO</option>
<option value="51">MATO GROSSO</option>
<option value="50">MATO GROSSO DO SUL</option>
<option value="31">MINAS GERAIS</option>
<option value="15">PARÁ</option>
<option value="25">PARAÍBA</option>
<option value="41">PARANÁ</option>
<option value="26">PERNAMBUCO</option>
<option value="22">PIAUÍ</option>
<option value="33">RIO DE JANEIRO</option>
<option value="24">RIO GRANDE DO NORTE</option>
<option value="43">RIO GRANDE DO SUL</option>
<option value="11">RONDÔNIA</option>
<option value="14">RORAIMA</option>
<option value="42">SANTA CATARINA</option>
<option value="35">SÃO PAULO</option>
<option value="28">SERGIPE</option>
<option value="17">TOCANTINS</option>
</select>
<select name="pkCodMunicipio" id="pkCodMunicipio" tabindex="17">
<option value="">Municípios</option>
<option value="1400050">ALTO ALEGRE</option>
<option value="1400027">AMAJARI</option>
<option value="1400100">BOA VISTA</option>
<option value="1400159">BONFIM</option>
<option value="1400175">CANTA</option>
<option value="1400209">CARACARAI</option>
<option value="1400233">CAROEBE</option>
<option value="1400282">IRACEMA</option>
<option value="1400308">MUCAJAI</option>
<option value="1400407">NORMANDIA</option>
<option value="1400456">PACARAIMA</option>
<option value="1400472">RORAINOPOLIS</option>
<option value="1400506">SAO JOAO DA BALIZA</option>
<option value="1400605">SAO LUIZ</option>
<option value="1400704">UIRAMUTA</option>
</select>
...
<button name="btnSearch" class="btnDefault btn btn-warning" title="Buscar" type="submit" id="btnSearch" onclick="void(0);">Buscar</button>
</div>
<input type="hidden" name="undefined" value="undefined">
</form>
You can use a css selector combination. The below use an id (#) selector to target the parent select tag element in descendant combination with option element selector to get all the child option tag elements.
Dim nodeList As Object, i As Long
Set nodeList = HTMLDoc.querySelectorAll("#pkCodEstado option")
For i = 0 To nodeList.Length-1
Debug.Print nodeList.item(i).innerText
Next
i is already declared at the top so you don't actually need to declare again. You should use Option Explicit at the top off all modules and thus declare all your variables. You have a number of undeclared variables in your code.
here i attached the code of select can we add the textbox and button into select2 elements.
here which i used a code:
<select style="width:100%" id="e9">
<option value="volvo">Suger</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
here i attached the output image how i really want:
here is the answer...
$(".select2-drop").append('<div><input type="text" style="width: 86%;padding: 9px;"name="lname"><input class="PrimaryBtn" type="submit" value="Add"></div>');
$("#e9").select2("container").find("div.select2-drop").append('<div><input type="text" name="lname"><input class="PrimaryBtn" type="submit" value="Add"></div>');
may be this will help, it will add to the needed select2 only
Select Code:
<div class="control-group">
<select data-placeholder="Choose a user:" class="input-xxlarge" ui-select2="{allowClear: true}" data-ng-model="section.user_id" ng-options="user.id as user.name + ' (' + user.email + ')' for user in people" >
<option value=""></option>
</select>
</div>
Produced code: (removing ui-select2="{allowClear: true}")
<select data-placeholder="Choose a user:" class="input-xxlarge ng-pristine ng-valid" data-ng-model="section.user_id" ng-options="user.id as user.name + ' (' + user.email + ')' for user in people">
<option value="" class=""></option>
<option value="0">Tiago (example#domain.com)</option>
<option value="1" selected="selected">Eduardo (example#domain.com)</option>
<option value="2">Rodrigo (example#domain.com)</option>
</select>
Result:
http://i.imgur.com/iStWMMn.png
Problem:
As you can see the produced code has the third option selected, and when i open the dropdown (image) is also selected, but while is closed (before being open for the first time) it doesnt show the selected option.
How it stays and how it should be:
http://i.imgur.com/D5EchRr.png
So... if its selected (in the produced html) why it doesnt show as if it was selected?
Remove the ng-option attribute and try this:
<option ng-repeat="user in people" value="{{user.id}}">{{user.name}}</option>
I have two select list that are equal how do i access the second one?
I have put a value on the first one but when putting a value to the second it goes to the first.
Anyone can help me.
<div id="selectNumber">
<select id="numbers" name="numbers" tabindex="5" onchange="changeNumbers(this);">
<option value="" selected="selected"></option>
<option value="all">25</option>
<option value="123">26</option>
<option value="124">27</option>
</select>
<a onclick="addRemoveSelectedNumber(this);">
<img src="../../static/images/delete.png">
</a>
</div>
<div id="selectNumber">
<select id="numbers" name="numbers" tabindex="5" onchange="changeNumbers(this);">
<option value="" selected="selected"></option>
<option value="all">25</option>
<option value="123">26</option>
<option value="124">27</option>
</select>
<a onclick="addRemoveSelectedNumber(this);">
<img src="../../static/images/delete.png">
</a>
Tanks
This will select 25 from the second select list:
browser.select_list(:id => "numbers", :index => 1).select "25"
More information: Multiple Attributes chapter at https://github.com/zeljkofilipin/watirbook/blob/master/link.md
By the way, you should report a bug that there are multiple instances of HTML elements with the same id on the page. Per the HTML standard, ID values should be unique