Question

我希望并排显示选择列表和图像。

随着选择列表中的值发生变化，图像也会发生变化。

我尝试过类似的东西，但不起作用..

<p>Locales: <select data-bind="options: locales, selectedOptions: selected, optionsCaption: 'Select your locale...', optionsText: 'country', optionsValue: 'country'"></select></p>
<p data-bind="text: selected"></p>
//<img data-bind="attr: {src: image, alt: country}" class="photoThumbnail"/>

function viewModel() {
  var self = this;
  self.locales = [
   { country: 'USA', image: 'en_US.jpg' },
   { country: 'Spain', image: 'es_ES.jpg' },
   { country: 'French', image: 'fr_FR.jpg' }
  ]
  self.selected = ko.observable('USA');
 }
ko.applyBindings(new viewModel());

需要确保的一件事是，所有图像都会立即加载，以便在用户更改选择列表值时没有延迟......

真心感谢任何帮助

由于

Answer 1

您不应该使用＆＃39; selectedOptions＆＃39;绑定处理程序，如果你不是多选。另外，尽量不要指定＆＃39; optionsValue＆＃39;绑定，如果你要使用整个对象。它只会让你写下许多必要的代码：看一下@本文档：http://knockoutjs.com/documentation/options-binding.html

至于并排看看@：How to align an inline-block horizontally and vertically

您修改了代码。希望它有所帮助：

确保图片网址正确

＆＃13;

function viewModel() {
    var self = this;
    self.locales = [{
        country: 'USA',
        image: 'en_US.jpg'
    }, {
        country: 'Spain',
        image: 'es_ES.jpg'
    }, {
        country: 'French',
        image: 'fr_FR.jpg'
    }]
    self.selected = ko.observable('USA');
}
ko.applyBindings(new viewModel());

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<p>Locales:
    <select data-bind="options: locales, value: selected, optionsCaption: 'Select your locale...', optionsText: 'country'"></select>
</p>
<div data-bind="with: selected">
    <p data-bind="text: country"></p>//
  <span>Images should point to the correct url or use a base64 string</span>
<img data-bind="attr: {src: image, alt: image}" class="photoThumbnail" />
</div>

＆＃13;

在knockoutjs中显示具有相应图像的选择列表

1 个答案: