Top-level data-link="{for...}" does not work on a 'select' element

[alnico2001]

If you replace <select> with a <div>, it renders fine.

https://jsfiddle.net/alnico/ubLzcxy7

[BorisMoore]

In your scenario you are wanting to data-link the innerHTML of a <select> - which is a different 'target' than the default value. See this section for discussion of multiple targets: Full syntax – multiple targets, multiple tags, multiple bindings...

So you need to use the target html{...}, for innerHTML . You can at the same time bind to value property, which is the default target for a <select> element. So you will have something like:

<select data-link="html{for selectOptions tmpl='nameTmpl'} {:chosenOption:}"></select>

using the data:

var appData = {
    chosenOption:"Option 2",
    selectOptions: [{ option: "Option 1" }, { option: "Option 2" }],
};

Here is an updated version of your JsFiddle: https://jsfiddle.net/BorisMoore/g26dzp4a/2/

See also Data-linking to innerText / innerHTML as well as the related sample using the jQueryUI {{selectMenu}} control (second sample in the page)

[alnico2001]

Ah yes, I should have caught that...1st time doing top-level data linking. Thanks Boris!

[BorisMoore]

BTW, the same syntax for multiple targets, and the html{} target for <select> apply equally to regular linked template binding, as well as top-level binding.

see: https://jsfiddle.net/BorisMoore/vjz8f5h0/

Closing as "question" (not a bug)