使用knockout在选择框中设置和修改值

时间:2017-09-05 14:49:18

标签: javascript html knockout.js

好吧,我有两个问题让我很担心......首先,我不知道如何给选择框一个默认值。

而且我无法通过事件点击更改选择框的值...我创建了一个小提琴示例,如果有人可以帮我一把,我将非常感激!

HTML

<select id="FilterBox" data-bind="value: siteGetOne">
  <option value="-2">City Wide</option>
  <!-- ko foreach: sites -->
  <option data-bind="text: name, value: $data"></option>
  <!-- /ko -->
</select>

Selection Option Object : <span data-bind="text: siteGetOne"></span><br/>
Selection Option name : <span data-bind="text: siteGetOne().name"></span><br/>
Selection Option id : <span data-bind="text: siteGetOne().id"></span><br/>

<a href="#" data-bind="click: setValue(1);">Set Value to 1</a>
<a href="#" data-bind="click: setValue(2);">Set Value to 2</a>
<a href="#" data-bind="click: setValue(3);">Set Value to 3</a>

JS

var viewModel = function() {
    var self = this;
    setValue = ko.observable();

    self.sites = [
      { name: 'Site 1', id: 1},
      { name: 'Site 2', id: 2},
      { name: 'Site 3', id: 3}
    ];

    self.siteGetOne = ko.observable(self.sites[2].id);

    self.siteGetOne.subscribe(function (newValue) {
      console.log(newValue);
    }, self);
}

ko.applyBindings(new viewModel());

http://jsfiddle.net/xjYcu/276/

编辑最终版http://jsfiddle.net/xjYcu/286/

1 个答案:

答案 0 :(得分:1)

你可能想要改变的事情。 这是整个小提琴。 http://jsfiddle.net/xjYcu/283/

第一个是你应该为你的选择使用选项绑定。

<select id="FilterBox" data-bind=" options: sites,
            optionsText: 'name',
            value: siteGetOne,
            optionsCaption: 'Choose...'">

</select>

还尝试将点击绑定更改为此类内容,以便传入参数。

<a href="#" data-bind="click: function () {setValue(0)}">Set Value to 1</a>
<a href="#" data-bind="click: function () {setValue(1)}">Set Value to 2</a>
<a href="#" data-bind="click: function () {setValue(2)}">Set Value to 3</a>