Javascript 动态更改选项文本-knockout.js

我想动态加载

选择选项的文本值

。 单击红色时，文本值应为红色；单击蓝色时，文本值应为蓝色。使用

knockout.js

<a class="a_red" data-bind="">Red</a>
<a class="a_blue" data-bind="">Blue</a>
<select>
    <option value="25"> 25 Red/Blue </option>    load either Red or Blue
    <option value="50"> 50 Red/Blue </option>
    <option value="100"> 100 Red/Blue </option>
    <option value="200"> 200 Red/Blue </option>
</select>

红色
蓝色
25红色/蓝色负载红色或蓝色
50红色/蓝色
100红色/蓝色
200红色/蓝色

将

chosenColor

属性添加到视图模型中，单击每个“红色/蓝色”切换后，该属性将发生更改。并且，使用自定义函数将值附加到每个

的标题中：

JS:

HTML:

及

---

请参见您只需使用

JQuery

，在用户单击链接时调用方法

text（）

，即可完成此操作，如下所示：

$（.a_red”）。单击（函数（）{
$（“选项”）。文本（“红色”）；
});
$（“.a_蓝”）。单击（函数（）{
$（“期权”）。文本（“蓝色”）；
});

25红色/蓝色
50红色/蓝色
100红色/蓝色
200红色/蓝色
您能告诉我们到目前为止您都做了哪些尝试吗？
var vm = {
  chosenColor: ko.observable('Red'),
  chosenValue: ko.observable(),
  getCaption: function(val) {
    return val + ' ' + this.chosenColor()
  }
};

ko.applyBindings(vm);

<a href="javascript:;" class="a_red" data-bind="click: chosenColor.bind($data, 'Red')">Red</a>
<a href="javascript:;" class="a_blue" data-bind="click: chosenColor.bind($data, 'Blue')">Blue</a>

<select data-bind="value: chosenValue">
  <option value="25" data-bind="text: getCaption(25)"></option>
  <option value="50" data-bind="text: getCaption(50)"></option>
  <option value="100" data-bind="text: getCaption(100)"></option>
  <option value="200" data-bind="text: getCaption(200)"></option>
</select>

var qtys = [25,50,100,200];

function viewModel() {
    var self = this;

  this.chosenColor = ko.observable('Red');
  this.chosenValue = ko.observable();
  this.generateOptions = function(vm) {
    return qtys.map(function(q) {
        return { value: q,
                 caption: q + ' ' + self.chosenColor() };
    })
  }
};

ko.applyBindings(new viewModel());

<a href="javascript:;" class="a_red" data-bind="click: chosenColor.bind($data, 'Red')">Red</a>
<a href="javascript:;" class="a_blue" data-bind="click: chosenColor.bind($data, 'Blue')">Blue</a>

<select data-bind="value: chosenValue,
                   options: generateOptions(),
                   optionsValue: 'value',
                   optionsText: 'caption'">
</select>