使用Javascript更改DropDownList数据
我有一个页面,用户可以选择交易类型是账户间转账还是付款 我传入的模型有两个列表。 一个是SelectListItem的列表 一个是SelectListItem的列表 其中一个列表的填充方式如下:使用Javascript更改DropDownList数据,javascript,asp.net-mvc,twitter-bootstrap,Javascript,Asp.net Mvc,Twitter Bootstrap,我有一个页面,用户可以选择交易类型是账户间转账还是付款 我传入的模型有两个列表。 一个是SelectListItem的列表 一个是SelectListItem的列表 其中一个列表的填充方式如下: var entities = new EntityService().GetEntityListByPortfolio(); foreach (var entity in entities.Where(x=>x.EntityTypeId == (int)Constants.EntityTypes.
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
});
}
如果用户选择“账户间转账”,我需要:
使用Accounts中的列表填充DropdownA,并使用相同的帐户列表填充DropdownB
如果他们选择付款,那么我需要将DrowdownB更改为第三方的列表
是否有一种方法可以使用javascript更改列表源,客户端
function changeDisplay() {
var id = $('.cmbType').val();
if (id == 1) // Payment
{
$('.lstSource'). ---- data from Model.ThirdParties
} else {
$('.lstSource'). ---- data from Model.Accounts
}
}
我不想回电话,因为我希望能快点。当然可以 试一试 var newOption=一些文本; $.lstSource.appendnewOption 或 $.lstSource.append$一些文本 或 $'.lstSource'。 追加美元。 属性值,123。 文本一些文本
B默认情况下,我认为数据源的概念在html/javascript中并不意味着什么 然而,您正在寻找的解决方案类似于knockoutjs 您可以将viewmodel绑定到任何html元素,然后可以更改DropDownList的数据源
请参阅:您可以通过jquery代码更新来加载选项 这是密码 您将在网站上获得有关Newton Json的所有信息 C代码 你会得到一个像这样的jsonstring
[{"value":"1","text":"option 1"},{"value":"2","text":"option 2"},{"value":"3","text":"option 3"}]
HTML代码
JavaScript代码
新的Javascript代码fpor Json
这是小提琴
请参阅新的JSIDLE for Json,这看起来很有希望。我已经通过提问进行了修改,但展示了如何为模型构建列表。我必须为您的“ListA”构建一个字符串,而不是我正在做的事情?那么,一个逗号分隔的列表?每个项目都有一个ID,那么列表会是什么样子呢?谢谢!这100%有效。有一件事。。。不是使用listA.pushnew选项1,而是使用;,是否有一种方法可以填充数组字符串,比如,[[Option Description,1],[Option 2 Description,2]……]?我正在尝试它,但它没有填充。这是尝试保存传递到页面的数据。总有一种方法。。所以,您的意思是要传递这个字符串[[Option Description,1],[Option 2 Description,2]…],它应该得到填充。如果是这样的话,为什么不使用Json字符串呢?你不需要做很多事情。谢谢Pratik。你是说打电话到数据库来填充列表吗?如果是这样,则需要立即进行更新,因此需要在页面加载时加载数组,而无需进一步调用数据库。或者,是否有一个json字符串可以填充,并且在没有调用的情况下使用?代码将更新。我已经给了你一个好主意。弄清楚它是如何为你工作的。如果答案对你有用,请将其标记为正确。不胜感激
[{"value":"1","text":"option 1"},{"value":"2","text":"option 2"},{"value":"3","text":"option 3"}]
<button onclick="loadListA();">Load A</button>
<button onclick="loadListB();">Load B</button>
<select name="" id="items">
</select>
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) )
});
}
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) )
});
}