How to bind selected item in a dropdown list in to a textbox and edit?

[sree]

hi i am new to angular 2..here i am trying to edit selected item in Dropdown.but how can i do this?

this is Dropdown. i need to bind the selected items and do edit update

Here first one is my dropdown.i need to bind and do edit update in the second code snippet.when ever clicking a particular item in drop down dat item and id should be display here .how can i do? please help me

 

<label>Select Market</label>

<select class="user-preselect btn-add" style="width: 90%;height: 34px;">

<option value = "0" selected="selected">ADD Market</option>

<option* ngFor = "let country of Countrylist" value={ { country.id} } >{{country.marketname}}</option>

</select>

 

<form>
<div>

<label>Market Code:</label>

<input id = "Mcode" type="text" /></div>

<div><label>Market Name:</label>

<input id = "Mname" type="text" /></div>

need to bind and update like this

<div class="form-group">

<button class="btn btn-danger"   ng-model="[(country.id)]" type="submit">Reset</button>

<button class="btn btn-success"  ng-model="[(country.name)]" type="submit">Update</button></div>

</form>

[Karthikeyan Viswanathan]

Hi Sree, 

Thanks for contacting Syncfusion support. 

You can get the select tag text and value using (change) event in Angular2. Then, you can bind and do edit for those values. We have achieve this use case with both select tag and ejDropDownList. Please refer to the below code snippet: 

<code> 

Bind the change event to select tag. 

<label>Select Market</label><br/> 

<select class="user-preselect btn-add" style="width: 90%;height: 34px;"(change)="selectchange($event)"> 

<option value="0" selected="selected">ADD Market 

<option *ngFor="let country of Countrylist" [value]="country.id" >{{country.name}}</option> 

</select><br/><br/> 

</code> 

 

<code> 

You can get the selected value and text in below way. 

selectchange(args){ 

  this.countryValue = args.target.value; 

  this.countryName = args.target.options[args.target.selectedIndex].text; 

} 

</code> 

 

<code> 

To bind the change event in dropdownlist. 

<label> Syncfusion Dropdownlist </label><br/><br/>   

<input ej-dropdownlist [dataSource]="Countrylist"<br/> 

[fields]="localfields"(change)="selectdrop($event)" watermarkText="ADD a Market" 

type="text"width="100%"/>  

</code> 

 

<code> 

You can get the value and text in below ways. 

selectdrop(args){ 

  this.countryValue = args.value; 

  this.countryName = args.text; 

} 

</code> 

 

<code> 

Model values bind to input for edit purpose. 

<form name="formEle">   

<div><br/><br/> 

<label>Market Code:</label><br/><br/> 

<input id="Mcode" type="text" name="countryValue"  [(ngModel)]="countryValue"/></div> 

<br/><br/> 

<div><label>Market Name:</label><br/><br/> 

<input id="Mname" type="text" name="countryName" [(ngModel)]="countryName"  /></div><br/><br/> 

need to bind and update like this<br/><br/> 

ID:{{countryValue}}<br/><br/><br/> 

Name:{{countryName}}<br/><br/><br/> 

<div class="form-group"> 

<button class="btn btn-danger" type="submit">Reset</button> 

<button class="btn btn-success" type="submit">Update</button> 

</div>  

</form> 

</code> 

 

Sample link: http://www.syncfusion.com/downloads/support/directtrac/177990/SELECT~1-113265963.ZIP  

 

Regards, 

Karthikeyan V. 

 

[Moses]

hi i am new to angular 2..here i am trying to edit selected item in Dropdown.but how can i do this?

this is Dropdown. i need to bind the selected items and do edit update

Here first one is my dropdown.i need to bind and do edit update in the second code snippet.when ever clicking a particular item in drop down dat item and id should be display here .how can i do? please help me

 

<label>Select Market</label>

<select class="user-preselect btn-add" style="width: 90%;height: 34px;">

<option value = "0" selected="selected">ADD Market</option>

<option* ngFor = "let country of Countrylist" value={ { country.id} } >{{country.marketname}}</option>

</select>

<form>
<div>
<label>Market Code:</label>

<input id = "Mcode" type="text" /></div>

<div><label>Market Name:</label>

<input id = "Mname" type="text" /></div>

need to bind and update like this

<div class="form-group">

<button class="btn btn-danger"   ng-model="[(country.id)]" type="submit">Reset</button>

<button class="btn btn-success"  ng-model="[(country.name)]" type="submit">Update</button></div>

</form>

Hello, i don't know what this is for.

[Keerthana Rajendran]

Hi Moses,   

   

Thank you for contacting Syncfusion Support.   

   

We have provided a solution for getting the selected item text and value for both select element and our ejDropDownList in our previous update. Please refer to the below links for more details.   

   

https://stackoverflow.com/questions/35055088/get-current-value-when-change-select-option-angular2   

   

https://help.syncfusion.com/api/angular/ejdropdownlist#events:change   

   

   

Please let us know whether you need any assistance in our Syncfusion product to assist you   

   

Regards,   

Keerthana.