How to bind dropdown values to javascript array?

Question

I am working in MVC and I have to bind dropdown values to an array in javascript. How do I do that?

dropdown list-

Html.DropDownListFor(m => m.MyActivityRequest.ToMonth, Model.MonthNames, new { @id = "monthToSelect" })

Javascript function:

$(document).ready(function(){ 
        $("#yearToSelect").change(function(){
            var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
            var date = new Date();
            var monthVar = date.getMonth();
            var yearVar = date.getFullYear();
            if ($(this).val() < yearVar ){
                $("#monthToSelect").find('option').remove();
                for( i = 0; i < 12; i++ ){          
                    $("#monthToSelect").append($("<option>",{
                        value: months[i],
                        text: months[i]
                    }));
                };
            }

you can see that the the array- 'months' is hard coded as of now. I want to dynamically bind the dropdown values to this array.

from where you are getting these month values? you can create new array out of it or use the new array as it is. — Bhushan Kawadkar, Apr 28 '15 at 04:22
You `@Html.DropDownListFor()` suggests you already have the month names (in `Model.MonthNames`). What are you actually trying to do? — , Apr 28 '15 at 04:25
Actually Ii was just supposed to iterate through the dropdown list values- it solved my prob: `var months = new Array(); $('#monthSelect option').each(function() { months.push($(this).text()); });` — Atharva, Apr 28 '15 at 09:21

score 1 · Answer 1 · edited May 23 '17 at 12:14

Js Fiddle Demo.

Inside your code place the below code appropriately.

Better Approach:

var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
var option = '';

for (i=0;i<months.length;i++){
   option += '<option value="'+ months [i] + '">' + months [i] + '</option>';
}

$('#monthToSelect').append(option);

Refered from here.

score 0 · Answer 2 · answered Apr 28 '15 at 04:38

0

I think you have to pass the month list from controller. So in javascript you can make an ajax call and return the same list of months. You can use this list instead of array- 'months' in your javascript function.

answered Apr 28 '15 at 04:38

Spider man

3,224
4
30
42

How to bind dropdown values to javascript array?

2 Answers2