使用Javascript更改下拉列表数据

Change DropDownList data with Javascript

本文关键字：下拉列表 数据 Javascript 使用      更新时间：2023-09-26

我有一个用户可以选择交易类型是账户间转账还是支付的页面。

我传入的模型有两个列表。一个是SelectListItem列表一个是SelectListItem

的列表

其中一个列表是这样填充的:

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
    });
}

如果用户选择'Inter account transfer'，我需要:

用来自Accounts的列表填充DropdownA，并用相同的Accounts列表填充DropdownB

如果他们选择"付款"，那么我需要将DrowdownB更改为ThirdParty列表。

是否有一种方法，使用javascript，改变列表源，客户端?

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

我不喜欢回拨，因为我希望它是快速的。

你可以通过jquery加载这些选项
Code is Updated
下面是代码

你会得到所有关于牛顿Json在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;

你会得到一个jsonstring，像这样

[{"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代码


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 for 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) )
    });
}

这里是小提琴http://jsfiddle.net/pratbhoir/TF9m5/1/

查看Json的新Jsfiddle http://jsfiddle.net/pratbhoir/TF9m5/3/

当然可以，所以

试

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

或

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

或

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

参考链接

B默认情况下，我不认为"数据源"的概念在html/javascript中有什么意义

然而，你正在寻找的解决方案是像knockoutjs

你将能够绑定一个视图模型到任何html元素，然后你将能够改变你的下拉列表的数据源

参见:http://knockoutjs.com/documentation/selectedOptions-binding.html

相关文章：