Change DropDownList data with Javascript

Question

I have a page where a user can select if the transaction type is an inter accounts transfer, or a payment.

The model I pass in had two lists. One is a list of SelectListItem One is a list of SelectListItem

One of the lists is populated like this:

var entities = new EntityService().GetEntityListByPortfolio();
foreach (var entity in entities.Where(x=>x.EntityTypeId == (int)Constants.EntityTypes.BankAccount))
{
    model.BankAccounts.Add(new SelectListItem
    {
        Value = entity.Id.ToString(CultureInfo.InvariantCulture),
        Text = entity.Description
    });
}

If the user selects 'Inter account transfer', I need to:

Populate DropdownA with the list from Accounts, and populate DropdownB with the same list of Accounts

If they select "Payment", then I need to change DrowdownB to a list of ThirdParty.

Is there a way, using javascript, to change the list sources, client side?

function changeDisplay() {
    var id = $('.cmbType').val();
    if (id == 1) // Payment
    {
        $('.lstSource'). ---- data from Model.ThirdParties
    } else {
        $('.lstSource'). ---- data from Model.Accounts
    }
}

I'd prefer not to do a call back, as I want it to be quick.

Pratik Bhoir · Accepted Answer · 2014-06-20T05:35:25.600

You can load the options by jquery
Code is Updated
Here is the code

You will get everything about Newton Json at http://json.codeplex.com/

C# CODE

//You need to import Newtonsoft.Json  
string jsonA = JsonConvert.SerializeObject(ThirdParties);
//Pass this jsonstring to the view by viewbag to the
Viewbag.jsonStringA = jsonA;

string jsonB = JsonConvert.SerializeObject(Accounts);
//Pass this jsonstring to the view by viewbag to the
Viewbag.jsonStringB = jsonB;

You will get a jsonstring like this

[{"value":"1","text":"option 1"},{"value":"2","text":"option 2"},{"value":"3","text":"option 3"}]

HTML CODE

<button onclick="loadListA();">Load A</button>
<button onclick="loadListB();">Load B</button>

<select name="" id="items">

</select>

JavaScript Code

function option(value,text){
     this.val= value;
    this.text = text;
}

var listA=[];
var listB=[];

//you just have to fill the listA and listB by razor Code
    //@foreach (var item in Model.ThirdParties)
    //{
    //    <text>
    //    listA.push(new option('@item.Value', '@item.Text'));
    //    </text>
   // }
    //@foreach (var item in Model.Accounts)
   // {
    //    <text>
   //     listA.push(new option('@item.Value', '@item.Text');
   //     </text>
   // }

listA.push(new option(1,"a"));
listA.push(new option(2,"b"));
listA.push(new option(3,"c"));

listB.push(new option(4,"x"));
listB.push(new option(5,"y"));
listB.push(new option(6,"z"));

function loadListA(){
    $("#items").empty();
    listA.forEach(function(obj) {
        $('#items').append( $('<option></option>').val(obj.val).html(obj.text) )
    });
}

function loadListB(){
    $("#items").empty();
    listB.forEach(function(obj) {
        $('#items').append( $('<option></option>').val(obj.val).html(obj.text) )
    });
}

NEW Javascript Code fpor Json

var listA=[];
var listB=[];
var jsonStringA ='[{"val":"1","text":"option 1"},{"val":"2","text":"option 2"},{"value":"3","text":"option 3"}]';
var jsonStringB ='[{"val":"4","text":"option 4"},{"val":"5","text":"option 5"},{"value":"6","text":"option 6"}]';

//you just have to fill the listA and listB by razor Code 
//var jsonStringA = '@Viewbag.jsonStringA';
//var jsonStringB = '@Viewbag.jsonStringB';

listA =  JSON.parse(jsonStringA);
listB =  JSON.parse(jsonStringB);

function loadListA(){
    $("#items").empty();
    listA.forEach(function(obj) {
        $('#items').append( $('<option></option>').val(obj.val).html(obj.text) )
    });
}

function loadListB(){
    $("#items").empty();
    listB.forEach(function(obj) {
        $('#items').append( $('<option></option>').val(obj.val).html(obj.text) )
    });
}

Here is the fiddle http://jsfiddle.net/pratbhoir/TF9m5/1/

See the new Jsfiddle for Json http://jsfiddle.net/pratbhoir/TF9m5/3/

This looks promising. I have altered by question, but showing how I build the List for the model. Instead of what I am doing, I must build a string for your 'ListA'? So, a comma separated list? Each item has an ID, so how would the listA look then? — Craig, Jun 19 '14 at 11:05
Thanks for that! This works 100%. One thing... instead of using "listA.push(new option(1,"a"));", would there not be a way to populate an array string, like, "[["Option Description", "1"],["Option 2 Description", "2"]......]? I am trying it, but it doesn't populate. This is to try save on data being passed to the page. — Craig, Jun 20 '14 at 04:38
There is always a way.. SO, you mean you are going to pass this string "[["Option Description", "1"],["Option 2 Description", "2"]......] and it should get populate. If its like this why dont you use Json string you dont have to do much.. — Pratik Bhoir, Jun 20 '14 at 05:06
Thanks Pratik. Are you talking about making a call to the database to populate the list? If so, there is a requirement to make the updates instant, so the arrays need to be loaded when the page loads, without further calls to the DB. Or, is there a json string that can be populated, and used without calls? — Craig, Jun 20 '14 at 05:14
COde is Updated. I have gave you and idea. figure it out how it works for you. Please mark answer as correct if its useful for u. It would be appreciated. :) — Pratik Bhoir, Jun 20 '14 at 05:37

score 0 · Answer 2 · edited May 23 '17 at 11:57

0

ofcourse you can so that

try

var newOption = "<option value='"+"1"+'>Some Text</option>"; $(".lstSource").append(newOption);

or

$(".lstSource").append($("<option value='123'>Some Text</option>");

Or

$('.lstSource'). append($("<option></option>"). attr("value", "123"). text("Some Text"));

Link for reference

edited May 23 '17 at 11:57

Community

1
1

answered Jun 19 '14 at 10:45

Arijit Mukherjee

3,817
2
31
51

score 0 · Answer 3 · answered Jun 19 '14 at 10:54

B default, I don't think the concept of "data-source" means something in html/javascript

Nevertheless, the solution you're looking for is something like knockoutjs

You'll be able to bind a viewmodel to any html element, then you will be able to change the data source of your DropDownList

see : http://knockoutjs.com/documentation/selectedOptions-binding.html

Change DropDownList data with Javascript

3 Answers3