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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

130133 Apr 24,2017 01:25 PM UTC Mar 12,2018 09:15 AM UTC Angular 3
loading
Tags: ejDropDownList
sree
Asked On April 24, 2017 01:25 PM 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>


Karthikeyan Viswanathan [Syncfusion]
Replied On 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. 

 


Moses
Replied On 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.

Keerthana Rajendran [Syncfusion]
Replied On 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.   
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;