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

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

本文关键字：下拉列表 另一个 任何值 KnockoutJS 添加      更新时间：2023-09-26

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

以这个例子为例（JSFiddle）

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

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

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;
    });

但显然它没有用。这就是我试图添加和执行的操作（并且失败了）（JSFiddle）

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

=====================================

（上一页）

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

在那小提琴上，我在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下拉列表中添加到当前数字中。

见小提琴

看起来脚本在我在 HTML 上添加新select后就开始失败，甚至没有将更改放在 JS 上 （http://jsfiddle.net/yku33mtq/5/） ：/

在

KnockoutJS 中添加两个可以动态的下拉列表的正确方法是什么，规则是什么？

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

因此，您需要访问 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());
相关文章：