Databases
StackOverflow2013
Postsdbo
POHow do I display selected value in a cascading drop down list?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do I display selected value in a cascading drop down list?
    text
    copied!<p>I want extension of the following code for selected value in edit view. take a case of country -> state -> city.</p> <p>i have script CascadingDropDownList.js:</p> <pre><code>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 &lt; allOptions.length; i++) { option = allOptions[i]; if (option.key == key) { newOption = new Option(option.text, option.value); targetDropDownList.options.add(newOption); } } } </code></pre> <p>and I have a helper class:</p> <pre><code>public static class JavaScriptExtensions { public static string CascadingDropDownList(this HtmlHelper helper, string name, string associatedDropDownList) { var sb = new StringBuilder(); // render select tag sb.AppendFormat("&lt;select name='{0}' id='{0}'&gt;&lt;/select&gt;", name); sb.AppendLine(); // render data array sb.AppendLine("&lt;script type='text/javascript'&gt;"); var data = (CascadingSelectList)helper.ViewDataContainer.ViewData[name]; var listItems = data.GetListItems(); var colArray = new List&lt;string&gt;(); 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("&lt;/script&gt;"); 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&lt;CascadingListItem&gt; GetListItems() { var listItems = new List&lt;CascadingListItem&gt;(); 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; } } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload