We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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

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>


3 Replies

KV Karthikeyan Viswanathan Syncfusion Team April 25, 2017 10:14 AM UTC

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. 

 



MO Moses replied to sree March 12, 2018 02:31 AM UTC


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.


KR Keerthana Rajendran Syncfusion Team March 12, 2018 09:15 AM UTC

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.   
   
   
   
   
Please let us know whether you need any assistance in our Syncfusion product to assist you   
   
Regards,   
Keerthana.   
 


Loader.
Live Chat Icon For mobile
Up arrow icon