标签: cascadingdropdown

我想DropDownList在(使用)优选地在级联中创建两个.MVC3RazorC#

我想有一个下拉列表,您可以选择年份,另一个下拉列表,您可以根据所选年份选择特定的月份.

我们说得很简单.当我在下拉列表"年"中选择当前年份(即2011年)时,下拉列表"月"将填充当月(即3月)的月份.对于其他情况(其他年份),没有给出限制.此外,在选择下拉列表"年"中的任何元素之前,"阻止"下拉列表"月"将是很好的.

我已经在互联网上查找了一些解决方案,使用jQuery甚至是自制方法,但它们都引用了过去版本的MVC,并且一些命令已被弃用MVC3.

我有以下问题:

我开始用HTML和JS创建一个表单,有两个Dropdown(Country和City).现在我想用JQuery创建这两个动态,以便只有所选国家/地区的城市可见.

我已经开始使用一些基本的JS工作正常,但在IE中遇到了麻烦.现在我正在尝试将我的JS转换为JQuery以获得更好的兼容性.

我原来的JS看起来像这样:

function populate(s1, s2) {
    var s1 = document.getElementById(s1);
    var s2 = document.getElementById(s2);
    s2.innerHTML = "";
    if (s1.value == "Germany") {
        var optionArray = ["|", "magdeburg|Magdeburg", "duesseldorf|Duesseldorf", "leinfelden-echterdingen|Leinfelden-Echterdingen", "eschborn|Eschborn"];
    } else if (s1.value == "Hungary") {
        var optionArray = ["|", "pecs|Pecs", "budapest|Budapest", "debrecen|Debrecen"];
    } else if (s1.value == "Russia") {
        var optionArray = ["|", "st. petersburg|St. Petersburg"];
    } else if (s1.value == "South Africa") {
        var optionArray = ["|", "midrand|Midrand"];
    } else if (s1.value == "USA") { …

我想知道是否在ASP.NET MVC 5中引入了一些新的帮助器或方法来实现级联下拉列表.我知道一种通过使用JSON调用在MVC 3和MVC 4中实现级联下拉列表行为的方法

http://www.dotnet-tricks.com/Tutorial/mvc/HL53191212-Custom-Validation-for-Cascading-Dropdownlist-in-MVC-Razor.html

那么任何人都知道在MVC 5中实现级联下拉列表的更好方法吗？

我的Razor Layout上有一个Kendo UI Grid,它从控制器中获取数据.

在这个网格中,我希望有一组3个DropDownLists,它们是:

ProductGroups,Products,Services

我希望实现的行为是,当我向网格添加一行时,我ProductGroups先选择,然后Products使用按GroupId(值)过滤的产品列表更新DropDown .然后选择Product并喜欢第一个,Services使用过滤的productId(value)服务更新DropDown .

我不太清楚怎么做到这一点,有人可以帮帮我吗？

感谢大家的帮助.

最好的祝福.

我有一个角度4的表单,包含名字+姓氏和包含2个下拉列表(选择)的formarray作为级联下拉列表和删除按钮.表单的其余部分还包含一个发送按钮和一个添加选项按钮.我在这里添加了截图,让您更好地理解.表单添加,删除按钮和发送按钮工作有1个问题级联下拉列表只有当有1个级联下拉列表时,当我添加一个额外的级联时,选择前一组级联的值选择第二个选择搞砸了.我在这里添加了图片以获得更好的解释

正如你可以在第2和第3个画面cascadingdropdown工作当我改变标准选择看我FET正确选项在第二下拉菜单选择

在第4张图片第5张图片和第6张图片上,您可以看到添加选项按钮有效,但是当我在选项2第一个下拉列表中选择一个条件时,它与选项1第二次掉落混乱,现在它还包含第二个选项中的下拉选项

这是我的HTML代码

<form [formGroup] = "profileForm">

  <h1>Profile Form</h1>

 <div>
  <label for = "first-name-input">First Name</label>
  <input type="text" id="first-name-input" formControlName ="firstNameInput">
</div>
 <div>
    <label for = "last-name-input">Last Name</label>
    <input type="text" id="last-name-input" formControlName ="lastNameInput">
  </div>

  <div formArrayName="optionGroups">

    <div *ngFor="let optionGroup of profileForm.controls['optionGroups'].controls;  let i=index "[formGroup]="optionGroup">


      <h4>Option {{ i + 1 }} </h4>




     <div>
      <label for = "select-input">Criteria</label>
      <select id="select-input" (change)="onSelectSelect($event.target.value, i)"  formControlName ="selectInput">

          <option value="0" disabled selected>Select a Criteria</option>
          <option *ngFor="let select of selects"  [value]= "select.name">{{select.id}}</option>


        </select>

        <label for = "where-input">Option</label> …

想要进行通用的级联下拉,但递归很弱

该代码应该最终结束

• 在做出选择时,可以选择一件物品 - 衣服或小工具
• • 选择时可选择Levis/Gucci或LG/Apple
• • • 一个选择与Levis牛仔裤或夹克或Gucci鞋或礼服 - 选择时
• • • • 一件选用Levis牛仔裤尺码OR levis夹克尺码OR
• • • • 一款选择Gucci鞋码或Gucci连衣裙尺码

要么

• • • 只需选择LG电视或手机或Apple Macbook或iPhone,即可选择
• • • • 一个选择LG电视尺寸或LG电话尺寸或
• • • • 一款选择Apple Macbook尺寸或Apple iPhone尺寸

当我实际递归时,我失去了思路 - 或者也许可以使用过滤？

我假设一个人可以制作一组路径,然后根据路径显示/隐藏

const selObject = {
  "-- Select Item --": {
    "Clothes": {
      "-- Select brands --": {
        "Levis": {
          "-- Select product --": {
            "Jeans": {
              "-- Select size --": [
                "38",
                "39",
                "40"
              ]
            },
            "Jackets": {
              "-- Select size --": [
                "41",
                "42",
                "43"
              ]
            }
          }
        }, // end Levis
        "Gucci": {
          "-- Select product …

我目前正在学习ASP.NET MVC并使用Nhibernate.

我想使用Cascading Drop-Down Boxes.有没有人设法在MVC中使用级联下拉框？

更新:我查看了以下网站:链接文本和使用的方法1.

控制器代码

        var makeList = new SelectList(makeRepository.ListMakes (), "Id", "make",1);
        ViewData["Makes"] = makeList;

        //// Create Models view data
        var modelList = new CascadingSelectList(modelRepository.ListModels (Convert.ToInt32(makeList.SelectedValue.ToString())), "ModelID","Id", "Name");
        ViewData["Models"] = modelList;

查看代码

<%= Html.DropDownList("--Select Make--","Makes")%>
<label for="Makes">Car Model:</label>    
<%= Html.CascadingDropDownList("Models", "Makes") %> 

当选择了ID为1的Make时,会列出正确的汽车列表,但是当我选择不同的make时,模型列表为空？

我有一组级联下拉列表,用于选择房屋地址.我们按此顺序拆分地址:

1. 街道名称(例如10th,11th,Main)
2. Street Suffix(例如St,Ave)
3. 街道方向
4. 街道号码(门牌号码)

我正在使用knockout来生成通过REST查询从数据库中提取的下拉列表中的值.我有这个工作得很好,除了一个边缘情况.

首先让我告诉你一些关于地址的信息(当它们像这样分开时).总有一个街道名称,总有一个街道号码.并不总是使用后缀和方向.所以我可能有一个100 Savanna South(Savanna South是街道名称),或101 Main St.我假设后缀和方向改变了这些场景.

问题是,当我从第10位切换到第11位时.它们都只有一个后缀"街道",并且只有一个"西方"方向.当我进行更改时,后缀和方向不会更改,这不会触发相应的订阅以提取下一组数据.因此,如果我从10日改为11日,则房屋号码不会更新.

function AddViewModel() {
/* Address */
self.StreetName = ko.observable('');
self.StreetNames = ko.observableArray([""]);
self.StreetName.subscribe(function (val) {
    if ((val !== undefined && val !== null && val !== '') && val !== viewModel.StreetType()) {
        getStreetTypes(val);
    }
});

self.StreetType = ko.observable('');
self.StreetTypes = ko.observableArray([]);
self.StreetType.subscribe(function (val) {
    if (val !== undefined && val !== null && val !== '') {
        alert("I changed to " + val);
        getStreetDirections(self.StreetName, val);
    } …

我正在关注本教程:

http://www.dotnetexpertguide.com/2012/06/cascading-dropdown-knockoutjs-aspnet.html

该项目提供的工作就像一个魅力.它可以从这里下载:http: //files.dotnetexpertguide.com/download.aspx？key = cascadingddlknockoutjs

问题是 - 我无法弄清楚如何更改视图,以便再显示一个城市选择框,其内容会根据所选的状态而变化？

为城市编写另一个模型,并在控制器中按状态ID获取城市的操作非常简单,但我不明白如何更改View和JS代码以使其有效.

那么View的代码:

<p>
<b>Select Country :</b> @Html.DropDownList("ddlCountry", ViewBag.Country as SelectList,"Select...", new { onchange = "FetchStates();" })
</p>

<p data-bind="visible: states().length > 0">
<b>Select State :</b> <select data-bind="options: states, optionsText: 'StateName', optionsValue: 'StateId', optionsCaption: 'Choose...'"></select>
</p>

<script type='text/javascript'>

function CascadingDDLViewModel() {
  this.states = ko.observableArray([]);
}

var objVM = new CascadingDDLViewModel();
ko.applyBindings(objVM);

function FetchStates() {
  var countryCode = $("#ddlCountry").val();
  $.getJSON("/Home/GetStates/" + countryCode, null, function (data) {
    objVM.states(data);
  });
}

</script>

非常感谢任何帮助.

我有一个网页,其中两个kendoDropDownList使用级联.第一个是国家和第二个城市.当您选择州时,您可以让城市从第二个中进行选择DropDownList.如果我使用鼠标选择它们,这非常有效.

问题是当我尝试将一些数据绑定到状态更新而不是城市的 DropDownLists时.

这是我的页面的HTML:

<div id="container">
    <input id="state" name="state" data-bind="value: state"/>
    <input id="city" name="city" data-bind="value: city"/>
</div>

这是JavaScript:

var state = $("#state").kendoDropDownList({
    dataTextField: "state",
    dataValueField:"state",
    dataSource:    {
        serverFiltering:true,
        data:           states
    },
    change:        function () {
        console.log("state changed");
    }
}).data("kendoDropDownList");

var city = $("#city").kendoDropDownList({
    autoBind:      false,
    dataTextField: "city",
    dataValueField:"city",
    cascadeFrom:   "state",
    dataSource:    {
        serverFiltering:true,
        transport:      {
            read:function (operation) {
                var ds = cities [state.value()];
                if (ds) …