如何显示在级联选定值下拉列表？ [英] How do I display selected value in a cascading drop down list?
本文介绍了如何显示在级联选定值下拉列表？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想扩展以下code在编辑视图中选择值。 拿国家的情况下 - >状态 - >城市
我有脚本CascadingDropDownList.js：
函数bindDropDownList（即targetDropDownList）
{
VAR键= THIS.VALUE;
VAR allOptions = targetDropDownList.allOptions;
VAR选项;
VAR newOption;
targetDropDownList.options.length = 0;
对于（VAR I = 0; I＆LT; allOptions.length;我++）
{
选项= allOptions [I]
如果（option.key ==键）
{
newOption =新的选项（option.text，option.value）;
targetDropDownList.options.add（newOption）;
}
}
}
和我有一个辅助类：
公共静态类JavaScriptExtensions
{
公共静态字符串CascadingDropDownList（这HtmlHelper的帮手，字符串名称，字符串associatedDropDownList）
{
VAR SB =新的StringBuilder（）;
//渲染选择标签
sb.AppendFormat（＆LT;选择名称='{0}ID ={0}＆GT;＆LT; /选择＆gt;中，名）;
sb.AppendLine（）;
//渲染数据数组
sb.AppendLine（＆LT;脚本类型=文/ JavaScript的＆gt;中）;
VAR数据=（CascadingSelectList）helper.ViewDataContainer.ViewData [名]
VAR时listItems = data.GetListItems（）;
VAR colArray =新的名单，其中，串＆GT;（）;
的foreach（在listItems中的VAR项）
colArray.Add（的String.Format（{{键：{0}，值：{1}，文本：{2}}}，item.Key，item.Value，item.Text） ）;
变种jsArray =的string.join（，，colArray.ToArray（））;
sb.AppendFormat（$得到（{0}）allOptions = [{1}]。，名称，jsArray）;
sb.AppendLine（）;
sb.AppendFormat（$ addHandler操作（$得到（'{0}'），'变'，Function.createCallback（bindDropDownList，$ GET（{1}）））;，associatedDropDownList，姓名）;
sb.AppendLine（）;
sb.AppendLine（＆所述; /脚本＆gt;中）;
返回sb.ToString（）;
}
}
公共类CascadingSelectList
{
私人IEnumerable的_items;
私人字符串_dataKeyField;
私人字符串_dataValueField;
私人字符串_dataTextField;
公共CascadingSelectList（IEnumerable的项目，串dataKeyField，串dataValueField，串dataTextField）
{
_items =项目;
_dataKeyField = dataKeyField;
_dataValueField = dataValueField;
_dataTextField = dataTextField;
}
公开名单＆LT; CascadingListItem＆GT; GetListItems（）
{
VAR时listItems =新的名单，其中，CascadingListItem＆GT;（）;
的foreach（在_items VAR项）
{
VAR键= DataBinder.GetPropertyValue（项目，_dataKeyField）的ToString（）;
VAR值= DataBinder.GetPropertyValue（项目，_dataValueField）的ToString（）;
VAR文本= DataBinder.GetPropertyValue（项目，_dataTextField）的ToString（）;
listItems.Add（新CascadingListItem（键，值，文本））;
}
返回时listItems;
}
}
公共类CascadingListItem
{
公共CascadingListItem（字符串键，字符串值，字符串文本）
{
this.Key =键;
THIS.VALUE =价值;
this.Text =文本;
}
公共字符串键{获得;组; }
公共字符串值{获得;组; }
公共字符串文本{获得;组; }
}
解决方案
我已经做到了这一点。当选择的值是隐藏提起。
和确保你的控制器方法返回的JSON对象有两个字段。
＆LT;脚本类型=文/ JavaScript的＆GT;
VAR ddlCountry;
VAR ddlStateID;
页面加载函数（）{
ddlStateID = $ GET（STATEID）;
ddlCountry = $ GET（CountryID）;
$ addHandler操作（ddlCountry，变，BINDOPTIONS）;
BINDOPTIONS（）;
}
功能BINDOPTIONS（）{
ddlStateID.options.length = 0;
VAR CountryID = ddlCountry.value;
VAR stateSelected =的document.getElementById（'StateSelected'）值。
如果（CountryID）{
VAR URL =/学生/美国/+ CountryID;
$ .getJSON（URL，空，功能（数据）{
$（＃STATEID）空（）。
$每个（数据，函数（指数，optionData）{
如果（stateSelected == optionData.ID）{
$（＃STATEID）追加（＆LT;期权价值='
+ optionData.ID
+选择＆gt;中+ optionData.Name
+＆LT; /选项＆gt;中）;
}
其他 {
$（＃STATEID）追加（＆LT;期权价值='
+ optionData.ID
+'＆gt;中+ optionData.Name
+＆LT; /选项＆gt;中）;
};
}）;
}）;
};
}
ADDED 控制器（我的网址是学生/状态，即学生控制器我把下面的code）
公众的ActionResult国（INT ID）
{
VAR状态= db.states.Select（S =＆gt;新建{ID = s.ID，名称= s.Name}）排序依据（S =＆GT; s.Name）。.ToList（）;
返回JSON（州）;
}
您可以返回任意数量的字段，但如果任何人都会有一个空值，那么就不会转换的JSON对象。我不知道这个，但是当我回到全州的对象也不能正常工作。当时国表是有场名为deletedby并且它包含空值！但是，当我回到只有两个需要的字段，然后它工作正常！
I want extension of the following code for selected value in edit view. take a case of country -> state -> city.
i have script CascadingDropDownList.js:
function bindDropDownList(e, targetDropDownList)
{
var key = this.value;
var allOptions = targetDropDownList.allOptions;
var option;
var newOption;
targetDropDownList.options.length = 0;
for (var i=0; i < allOptions.length; i++)
{
option = allOptions[i];
if (option.key == key)
{
newOption = new Option(option.text, option.value);
targetDropDownList.options.add(newOption);
}
}
}
and I have a helper class:
public static class JavaScriptExtensions
{
public static string CascadingDropDownList(this HtmlHelper helper, string name, string associatedDropDownList)
{
var sb = new StringBuilder();
// render select tag
sb.AppendFormat("<select name='{0}' id='{0}'></select>", name);
sb.AppendLine();
// render data array
sb.AppendLine("<script type='text/javascript'>");
var data = (CascadingSelectList)helper.ViewDataContainer.ViewData[name];
var listItems = data.GetListItems();
var colArray = new List<string>();
foreach (var item in listItems)
colArray.Add(String.Format("{{key:'{0}',value:'{1}',text:'{2}'}}", item.Key, item.Value, item.Text));
var jsArray = String.Join(",", colArray.ToArray());
sb.AppendFormat("$get('{0}').allOptions=[{1}];", name, jsArray);
sb.AppendLine();
sb.AppendFormat("$addHandler($get('{0}'), 'change', Function.createCallback(bindDropDownList, $get('{1}')));", associatedDropDownList, name);
sb.AppendLine();
sb.AppendLine("</script>");
return sb.ToString();
}
}
public class CascadingSelectList
{
private IEnumerable _items;
private string _dataKeyField;
private string _dataValueField;
private string _dataTextField;
public CascadingSelectList(IEnumerable items, string dataKeyField, string dataValueField, string dataTextField)
{
_items = items;
_dataKeyField = dataKeyField;
_dataValueField = dataValueField;
_dataTextField = dataTextField;
}
public List<CascadingListItem> GetListItems()
{
var listItems = new List<CascadingListItem>();
foreach (var item in _items)
{
var key = DataBinder.GetPropertyValue(item, _dataKeyField).ToString();
var value = DataBinder.GetPropertyValue(item, _dataValueField).ToString();
var text = DataBinder.GetPropertyValue(item, _dataTextField).ToString();
listItems.Add(new CascadingListItem(key, value, text));
}
return listItems;
}
}
public class CascadingListItem
{
public CascadingListItem(string key, string value, string text)
{
this.Key = key;
this.Value = value;
this.Text = text;
}
public string Key { get; set; }
public string Value { get; set; }
public string Text { get; set; }
}
解决方案
I have achieved it. Where selected value is in Hidden Filed.
And make sure that your controller method returns json object with two fields.
<script type="text/javascript">
var ddlCountry;
var ddlStateID;
function pageLoad() {
ddlStateID = $get("StateID");
ddlCountry = $get("CountryID");
$addHandler(ddlCountry, "change", bindOptions);
bindOptions();
}
function bindOptions() {
ddlStateID.options.length = 0;
var CountryID = ddlCountry.value;
var stateSelected = document.getElementById('StateSelected').value;
if (CountryID) {
var url = "/Student/States/" + CountryID;
$.getJSON(url, null, function(data) {
$("#StateID").empty();
$.each(data, function(index, optionData) {
if (stateSelected == optionData.ID) {
$("#StateID").append("<option value='"
+ optionData.ID
+ "' selected>" + optionData.Name
+ "</option>");
}
else {
$("#StateID").append("<option value='"
+ optionData.ID
+ "'>" + optionData.Name
+ "</option>");
};
});
});
};
}
ADDED controller (My url is student/state i.e. in student controller I put following code)
public ActionResult States(int id)
{
var states = db.states.Select(s => new { ID = s.ID, Name = s.Name }).OrderBy(s=>s.Name).ToList();
return Json(states);
}
You can return any number of fields but if any of them will have a null value then it will not converted in json object. I am not sure about this but it wasn't working when I return whole state object. At that time states table was having field called deletedby and it was containing null values!. But when I return only two 'needed' fields then it is working properly!
这篇关于如何显示在级联选定值下拉列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
