[英]change option text dynamically - knockout.js
我想动态加载select option
的文本值。 当我单击红色时,文本值应为红色,而当我单击蓝色时,文本值应为蓝色。 使用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>
将chosenColor
属性添加到视图模型中,该属性将在单击每个“红色/蓝色”切换时更改。 并且,使用自定义函数将值附加到每个<option>
的标题中:
JS:
var vm = {
chosenColor: ko.observable('Red'),
chosenValue: ko.observable(),
getCaption: function(val) {
return val + ' ' + this.chosenColor()
}
};
ko.applyBindings(vm);
HTML:
<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>
见小提琴
您可以简单地使用JQuery
来做到这一点,当用户单击链接时,调用方法text()
,如下所示:
$(".a_red").click(function(){ $("option").text("red"); }); $(".a_blue").click(function(){ $("option").text("blue"); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#" class="a_red">Red</a> <a href="#" class="a_blue">Blue</a> <select> <option value="25"> 25 Red/Blue </option> <option value="50"> 50 Red/Blue </option> <option value="100"> 100 Red/Blue </option> <option value="200"> 200 Red/Blue </option> </select>
希望对您有帮助,再见。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.