Populate Html.DropDownList with jquery or JS

Question

Here is what I have:

for (i = 0; i < data.length; i++) {
                $("#myDropDownLisTId").find('tbody')  
                .append($('<option>').attr('value', data[i].id).attr('name', data[i].name)
                );               
            }

But the dropdown list always remains the same. Why is this not working? the data variable has beautiful values. Also, I would like before the for loop to empty the dropdown list/ How to do it?

Here is my drop down list in the view:

<%= Html.DropDownList("myDropDownLisTId")%>

@Shyju I added some details. Can you see the question again please? — user1322207
– user1322207, Commented Apr 9, 2012 at 18:11
jQuery is a JavaScript library, not an alternative to JavaScript. "jquery or JS" does not make sense. — Quentin
– Quentin, Commented Apr 9, 2012 at 18:17

idrumgood · Accepted Answer · 2012-04-09 18:23:29Z

6

Though the other answers will accomplish what you wish to do, I would recommend writing your option HTML to a string variable and appending it after the loop has finished, rather than appending within the loop. This can have some noticeable performance advantages when your list gets longer. Using .html() will also take care of emptying the list each time.

        var tempList = '';
        for (i = 0; i < data.length; i++) {  
            tempList += '<option value="' + data[i].id + '" name="' + data[i].name +'">' + data[i].text + '</option>';            
        }
        $("#myDropDownLisTId").html(tempList);

answered Apr 9, 2012 at 18:23

idrumgood

4,93421 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shyju Over a year ago

This is a very valid point. Thanks for sharing. I just added this to the accepted answer. +1 for teaching me something today.

OrionMD · Accepted Answer · 2018-07-02 22:30:51Z

2

Try this.

$.each(data, function() {
   $("#myDropDownLisTId").append($("<option />").val(this.id).text(this.Text));
 });

Check my this answer for more details about how to get data from an MVC action to load the dropdown list

EDIT: As per the comment to remove existing data

$("#myDropDownLisTId").empty()
$.each(data, function() {
   $("#myDropDownLisTId").append($("<option />").val(this.id).text(this.Text));
 });

EDIT 2: Idrumsgood's answer has a very good point. Instead of calling the append method everytime inside the loop, just keep the value inside a variable and call the html method only once.

http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctly

var items=""
$.each(data, function() {
   items+="<option value='" + this.id + "'>" + this.Text + "</option>";
 });
$("#myDropDownLisTId").html(items);

edited Jul 2, 2018 at 22:30

OrionMD

4111 gold badge8 silver badges13 bronze badges

answered Apr 9, 2012 at 18:11

Shyju

220k106 gold badges420 silver badges499 bronze badges

7 Comments

user1322207 Over a year ago

It's working :) But how to empty the dropdown list before that?

Florian Margaine Over a year ago

replace append with html :)

user1322207 Over a year ago

@FlorianMargaine But now there is only one option tag in the dropdown list

user1322207 Over a year ago

@Shyju And how do I add a separator in the dropdownlist - that can not be selected? "------"

Shyju Over a year ago

@user1322207: What is a separator ?

|

Brandon J. Boone · Accepted Answer · 2012-04-09 18:28:36Z

1

This seems to work: http://jsfiddle.net/ykFJd/2/

JS

var data = [
    {id:'0', name:'test 0'},  
    {id:'1', name:'test 1'},
    {id:'2', name:'test 2'},
    {id:'3', name:'test 3'},
    {id:'4', name:'test 4'},    
];


for (var i = 0; i < data.length; i++) {
    $("#myDropDownLisTId").append(
        $('<option />', {
            'value': data[i].id,
            'name': data[i].name,
            'text': data[i].name
        })
    );               
}

edited Apr 9, 2012 at 18:28

answered Apr 9, 2012 at 18:16

Brandon J. Boone

16.5k4 gold badges78 silver badges103 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:30:05Z

0

I wrote a nice function for binding a js hash to a select lists. See my answer at Best way to populate select list with JQuery / Json?

Example usage:

// you can easily pass in response.d from an AJAX call if it's JSON formatted
var users = [ {id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}, {id: 3, name: 'Cindy'} ]
setSelectOptions($('#selectList'), users, 'id', 'name');

edited May 23, 2017 at 12:30

CommunityBot

11 silver badge

answered Apr 9, 2012 at 18:19

Walter Stabosz

7,7955 gold badges48 silver badges79 bronze badges

Collectives™ on Stack Overflow

Populate Html.DropDownList with jquery or JS

4 Answers 4

1 Comment

7 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related