javascript - 在带 knockout 的选择框中设置和修改值

Question

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

而且我无法通过单击事件更改选择框的值...我创建了一个 fiddle 示例，如果有人可以帮助我，我将不胜感激!

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/

Answer 1

结合您可能想要更改的内容。这是整个 fiddle 。 http://jsfiddle.net/xjYcu/283/

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

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

</select>

也尝试将您的点击绑定(bind)更改为类似这样的内容，以便您可以传递参数。

<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>