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

Question

（更新）我一直在练习 KOjs，我对一些复杂的东西很好奇。

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

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

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

select 标签就在原来的 select 标签旁边：

<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() 上 select 编辑的任何值（项目 1 或项目 2 或项目 3）都将添加到在 displayValue()（alpha 或 bravo）上设置任何值并在 <h4 data-bind="text: sumOfValue"></h4>

上输出它们的结果

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

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

您只是忘记访问计算中的对象属性。在你的 select 中，整个对象被插入到 value 绑定的可观察对象中。

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

我做了一个工作fiddle：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());

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

Adding a value from a drop down to any set of values from another drop down in KnockoutJS

javascript

jquery

knockout.js