将下拉列表中的值添加到 KnockoutJS 中另一个下拉列表中的任何一组值

Question

（更新） 我一直在练习 KOjs，我对一些复杂的事情感到好奇。

Take this example (JSFiddle)

这是原作。有一个文本输出，它的值是从下拉列表中读取的。下拉列表中的每个项目都有一个数值，并且正在格式化（使用 numericJS）到文本中。然后一个字符显示在底部，对应于下拉菜单的 optionText 值。

现在，这就是我所做的：我添加了一个新的下拉菜单，其中还有预定义的值：

var x = 300;
var y = 1234;
var z = 78;

选择标签就在原来的选择标签旁边：

<select id="addThis" data-bind="options: addToThisSet, optionsText: 'numType', value: setNumValue"></select>

<select id="theList" data-bind="options: htmlSelectSet, optionsText: 'theText', value: displayTheValue"></select>


<p><span data-bind="text: charSymbol"></span></p>

我尝试为新的select 标签添加内容数组，格式与原始标签相同（我对此有不好的预感。对吗？）

self.addToThisSet = [{
        numType: "item 1",
        NumValue: x
    }, {
        numType: "item 2",
        NumValue: y
    }, {
        numType: "item 3",
        NumValue: z
    }];
    self.setNumValue = ko.observable();

    self.htmlSelectSet = [{
        theText: "alpha",
        theValue: num1
    }, {
        theText: "bravo",
        theValue: num2
    }];
    self.displayTheValue = ko.observable();

我的目标很简单：setNumValue()（第 1 项或第 2 项或第 3 项）上选择的任何值都将添加到 displayValue() 上设置的任何值（alpha 或 bravo) 并将结果输出到 <h4 data-bind="text: sumOfValue"></h4>

我认为这就像制作另一个 ko.computed 一样简单，添加所选变量并返回它们：

self.sumOfValue = ko.computed(function () {
        sumCont = numeral(self.setNumValue() + self.displayTheValue()).format('0,0');
        return sumCont;
    });

但显然它不起作用。 This is what I'm trying to add and do (and failed) (JSFiddle)

为此我需要一个欧比旺克诺比。帮助！ :(

================================ （上一个）

我有这个开始：http://jsfiddle.net/yku33mtq/1/

在那个 Fiddle 上，我在 Select 下拉列表中动态显示了一个数字值 - 然后在底部的 Select 下拉列表中显示一个字符来指定您的选择。

我尝试在号码旁边添加另一个select 下拉菜单，但它坏了:(

<h4 data-bind="text: sumOfValue"></h4><select id="addThis" data-bind="options: addToThisSet, optionsText: 'numType', value: setNumValue"></select>

<select id="theList" data-bind="options: htmlSelectSet, optionsText: 'theText', value: displayTheValue"></select>


<p><span data-bind="text: charSymbol"></span></p>

基本上，新的下拉菜单也会有数字值，这些数字取决于您的选择，将从下一个 select 下拉菜单添加到当前数字。

见Fiddle

当我在 HTML 上添加新的select 时，脚本似乎也开始失败，甚至还没有在 JS 上放置更改 (http://jsfiddle.net/yku33mtq/5/)：/

在 KnockoutJS 中添加两个可以动态的下拉菜单的正确方法和规则是什么？

Answer 1

您只是忘记访问您计算的对象属性。 在您的选择中，整个对象被插入到 value 绑定的 observable 中。

因此，您需要访问self.setNumValue().NumValue。

我做了一个工作小提琴：http://jsfiddle.net/yku33mtq/9/

HTML：

<h4 data-bind="text: sumOfValue"></h4>
<select id="addThis" data-bind="options: addToThisSet, 
                                optionsText: 'numType',     
                                value: setNumValue"></select>
<select id="theList" data-bind="options: htmlSelectSet, 
                                optionsText: 'theText',
                                value: displayTheValue"></select>
<p><span data-bind="text: charSymbol"></span></p>

JS：

function thisViewModel() {
    var self = this;

    self.addToThisSet = [{
        numType: "item 1",
        NumValue: 300
    }, {
        numType: "item 2",
        NumValue: 1234
    }, {
        numType: "item 3",
        NumValue: 78
    }];
    self.setNumValue = ko.observable();

    self.htmlSelectSet = [{
        theText: "alpha",
        theValue: 35450
    }, {
        theText: "bravo",
        theValue: 2450
    }];
    self.displayTheValue = ko.observable();

    self.sumOfValue = ko.computed(function () {
        var numValue = self.setNumValue();
        var display = self.displayTheValue();
        if (numValue && display) {
            return numValue.NumValue + display.theValue;
        }
    });

    self.charSymbol = ko.computed(function () {
        if (self.displayTheValue()) {
            if (self.displayTheValue().theText == "alpha") {
                return "A";
            }
            if (self.displayTheValue().theText == "bravo") {
                return "B";
            }
        }
        return null;
    });

}

ko.applyBindings(new thisViewModel());