Adding dropdown values dynamically

Question

I have a dropdown Markup like

 <ul class="dropdown-menu">
 <li><a href="#"></a></li>
 </ul>

From Server side I am getting values to be added as Comma separated like.

var dropdownMenuItems = "ADD,Substract,Multiply";

Now I want to add above values for which I have written like

 for (var i = 0; i <= dropdownMenuItems.length; i++)
 {
   $('.dropdown-menu a').add(dropdownMenuItems[i]);
 }

but I am getting error like JavaScript runtime error: Syntax error, unrecognized expression: , in console. Please help.

Rory McCrossan · Accepted Answer · 2016-08-03 12:44:26Z

2

You need to split the string in to an array using split(). Then you need to loop through it and create the li and a elements and append() them to the ul. Try this:

var arr = "ADD,Substract,Multiply".split(',');
var html = ''
for (var i = 0; i < arr.length; i++) {
  html += '<li><a href="#">' + arr[i] + '</a></li>';
}
$('.dropdown-menu').append(html);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="dropdown-menu"></ul>

Note that you should use < not <= in the for loop, and add() is used to add elements to an existing jQuery object, not create content in the DOM.

answered Aug 3, 2016 at 12:44

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

Comments

Rahul Tripathi · Accepted Answer · 2016-08-03 12:47:21Z

1

Try like this:

var result = 'ADD,Substract,Multiply';

$('.myClass').html($.map(result.split(','), function(item) 
{
  return $('<option></option>').val(item).html(item)[0].outerHTML
}).join(''));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select class="myClass">
</select>

answered Aug 3, 2016 at 12:47

Rahul Tripathi

173k33 gold badges292 silver badges341 bronze badges

1 Comment

Rory McCrossan Over a year ago

Nice solution - but you're creating option elements in a select, whereas the OP is clearly creating li in a ul. Also note that map() is unsupported in <IE9 if you need legacy browser support

Durgesh Ahire · Accepted Answer · 2016-08-03 12:53:17Z

1

try this one. it works

var dropdownMenuItems = "ADD,Substract,Multiply";
var list  = dropdownMenuItems.split(',');
$('.dropdown-menu').html('');
for (var i = 0; i <= list.length; i++)
 {
    $('.dropdown-menu').append('<li><a href="#">' + list[i] + '</a></li>');
 }

edited Aug 3, 2016 at 12:53

answered Aug 3, 2016 at 12:45

Durgesh Ahire

1178 bronze badges

3 Comments

Rory McCrossan Over a year ago

Are you sure this works? <= in the loop will mean it iterates one time too many, and add() doesn't do what you are expecting it to.

Rory McCrossan Over a year ago

Missed the <= ;)

Durgesh Ahire Over a year ago

Now its woking fine :)

Collectives™ on Stack Overflow

Adding dropdown values dynamically

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related