Populate dynamically generated selectlist with values

Question

Hi ,

I have some fields that are dynamically generated upon clicking the add button.
One of the field is a dropdownlist. How can i populate the dropdownlist value in this dynamically generated field. Image below shows the dropdownlist which is loaded on page load.

The below image shows the dropdownlist that is generated dynamically.

i cannot call the asp-items inside my javascript code.how can i populate the dropdownlist?

Answer 1

Hi @Blooming Developer ,

Since the DropDownList is dynamically generated, you should use JQuery Ajax to call the handler method and get the DropDownList select options, then populate the new DropDownList.

You can refer to the following Aspnet core Razor page sample:

Index.cshtml.cs:

public class IndexModel : PageModel  
{  
    private readonly ILogger<IndexModel> _logger;  

    public IndexModel(ILogger<IndexModel> logger)  
    {  
        _logger = logger;  
    }  
    public Bill Bill { get; set; }  
    public List<SelectListItem> TypeList { get; set; }  
    public void OnGet()  
    {  
        TypeList = GetTypeList();  
    }  
    //create a handler method to return the dropdownlist  
    public IActionResult OnGetGetTypeList()  
    {  
        return new JsonResult(GetTypeList());  
    }  
    //return the dropdownlist select options  
    public List<SelectListItem> GetTypeList()  
    {  
        //you can refer to the following code to get the select options from the database.  
        //List<SelectListItem> SectionList = (from d in entities.Sections  
        //                                    select new SelectListItem  
        //                                    {  
        //                                        Text = d.Secnam,  
        //                                        Value = SqlFunctions.StringConvert((double)d.SecID)  
        //                                    }).ToList();  
        // SectionList.Insert(0, new SelectListItem { Text = "--Select Section--", Value = "" });  
        List<SelectListItem> SectionList = new List<SelectListItem>()  
        {  
            new SelectListItem(){ Value="0", Text="Please select"},  
            new SelectListItem(){ Value="101", Text="IB"},  
            new SelectListItem(){ Value="102", Text="OB"},  
            new SelectListItem(){ Value="103", Text="3C"},  
            new SelectListItem(){ Value="104", Text="DOM"},  
        };  

        return SectionList;  
    }  
}  

Index.csthml:

@page  
@model IndexModel  
<div class="row">  
    <div class="col-md-4">      
        <form method="post" id="mainform">      
            <div class="form-group firstgroup">  
                 <label asp-for="Bill.Type" class="control-label"></label>  
                 <select asp-for="Bill.Type" asp-items="Model.TypeList"></select>  
                 <input type="button" value="Add" id="btnAdd" />  
            </div>  
   
        </form>  
    </div>  
</div>  

And use the following Javascript to add DropDownList and populate the select options:

149702-javascript-code.txt

The result is like this:

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Dillion