0

I wish to show a selectlist and an image side by side..

As the values in the selectlist changes the image would change as well.

I tried something like this but does not work..

<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()); 

One thing that needs to be ensured is that all images are loaded at once such that there is no lag while a user changes the selectlist values...

Any help is sincerely appreciated

Thanks

1 Answer 1

0

You shouldn't use the 'selectedOptions' binding handler if your isn't a multiselect. Also try not to specify the 'optionsValue' binding if you're going to use the whole object. It would only leave you writing lots of necessary code: take a look @ this documentation: http://knockoutjs.com/documentation/options-binding.html

As for the side by side take look @ : How to align an inline-block horizontally and vertically

Here's you modified code. Hope it helps:

Make sure the image urls are correct

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());
<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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.