淘汰赛链接的DropDownList ko.observableArray()-选择的插件 [英] Knockout linked DropDownList ko.observableArray() - chosen plugin

问题描述

主要问题是我需要链接两个选择. 当我在第一个选择中选择一个国家时，第二个必须显示所选国家的州.

The main question is that I need to link two select. When I choose one country in the first select the second must display the states of the selected country.

我得到了什么，自定义绑定:

What I got, The custom Binding:

 ko.bindingHandlers.chosen = {
        init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
            $(element).chosen();            
        },
        update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
            $(element).trigger("liszt:updated");         
        }
};

var viewModel = {
Comunidades : ko.observableArray([
    {"name": "Comunidad Valenciana" ,
     "id" : 0, "provincias": 
        [{"name" : "Alicante", "id": 0},
         {"name": "Valencia", "id" : 1},
         {"name": "Castellon", "id" : 2}
        ] } ,
    {"name": "Madrid" , "id" : 1 },
    {"name": "Murcia" , "id" : 2 }]
),
    ]),
selectedOne : ko.observableArray(),

ko.applyBindings(viewModel);

这样，我在HTML选择中显示了第一个数组，但是我不知道如何在第一个选项中显示"Provincias".

With this I display the first array in a HTML select, but I don't know how to display the 'Provincias' inside the first option for example.

我将尝试进行演示.

<link rel="stylesheet" href="http://harvesthq.github.com/chosen/chosen/chosen.css" />  
<select data-bind="options: Comunidades , value: selectedOne, chosen : true, optionsText: 'name', optionsValue: 'id'   "  class="chzn-select" style="width:300px;" ></select>

<select data-bind="options: Comunidades , value: selectedTwo, chosen : true, optionsText: 'name', optionsValue: 'id'   "  class="chzn-select" style="width:300px;" ></select>

<p data-bind="text: selectedOne"></bind>
<p data-bind="text: selectedTwo"></bind>

http://i.imgur.com/shqlFVp.png?1

推荐答案

http://jsfiddle.net/benfosterdev /wHtRZ/

])

有一个示例启发了我.使用带有Knockout的层叠DropDown List，也对Papa示例很有帮助.

There is the example I inspired in. Using a cascade DropDown List with Knockout, also helped the Papa example.

这篇关于淘汰赛链接的DropDownList ko.observableArray()-选择的插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！