Bind model list  to a dropdown list in JQuery

RadhaKrishnaKiJaya
RadhaKrishnaKiJaya used Ask the Experts™
on
Hi Experts,

This is my view model.

public class ResellerHomePageViewModel {
        public IList<SelectListItem> SelectList { get; set; }
    }

Open in new window


I have a dropdown list called "SelectPartner"
<select id="SelectPartner">
<option id="defaultOption" value=""></option>

</select>

Open in new window


How can I bind the value of "SelectList " (Model. SelectList ) to the dropdown list "SelectPartner" using jQuery on document.ready function?

Thanks in advance.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Eduard GherguArchitect - Coder - Mentor

Commented:
Hi,

You cannot have data binding per se by using jQuery, but you can dynamically inject option nodes in DOM with jQuery. You can do this by selecting the "SelectPartner" node, then iterate through your data and add the "option" via append() or appendTo().

Author

Commented:
Can you please show me an example?
Thanks for trying to help me!
Architect - Coder - Mentor
Commented:
var data = [
{"id":"aaa", "value":"aaa"},
{"id":"bbb", "value":"bbb"}];

$(document).ready(function() {
      var sel = $("#SelectPartner");
      data.forEach(function(item) {
        sel.append("<option id='" + item.id + "' value='" + item.value + "'>" + item.value + "</option>");
  });
});

Author

Commented:
Thank you so much for you help!
Eduard GherguArchitect - Coder - Mentor

Commented:
My Pleasure!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial