Unable to add attribute without a value using templates

[ccampbell]

It is entirely possible I am missing something very obvious, but I can’t seem to figure out how to render a <select> menu and add a selected attribute for the selected option.

I tried using this but it gives a syntax error

<option value="b"{{#if (val == 'b') }} selected{{/if}}>b</option>

https://svelte.technology/repl/?version=1.6.11&gist=dbf07e495a3c768a89a6de924c44ead9

---

I also tried using a ternary as described in #259, but that too gives a syntax error

<option value="b"{{ (val == 'b') ? ' selected' : '' }}>b</option>

---

The only way I could get it to work was doing this:

<option value="b" selected="{{ (val == 'b') ? ' selected' : '' }}">b</option>

https://svelte.technology/repl/?version=1.6.11&gist=4c44e8756ae112646cc1150077a555d0

That is not ideal because it generates a bunch of unnecessary code to have to repeat the selected= for every option even if they are not selected (although I suppose gzip will take care of some of that).

Is there a recommended/better way to do this?

Thanks so much!

[PaulBGD]

I think the suggested way is two-way binding, but that's waiting on #10

[Rich-Harris]

In Svelte, the value of a boolean attribute like selected is based on the expression therein, unlike in HTML where the presence of a boolean attribute is understood to mean 'true'.

In other words, you can do this:

<option value="a" selected="{{val == 'a'}}">a</option>

Demo here — try changing the value in the JSON in the bottom right. (I also added two-way binding so that using the <select> will change the value.)

[ccampbell]

Awesome. Looks much nicer than that ternary. Thanks! This actually seems to work without including the selected attribute at all using only the binding:

https://svelte.technology/repl/?version=1.6.11&gist=137e588f883100a9b50c8456d0df3ab3

Is that the best way to do it then?

[ccampbell]

Oh I take it back, that only works when the value changes, not on the initial load hmm

[Rich-Harris]

This actually seems to work without including the selected attribute at all using only the binding:

D'oh! Yes, I suppose it is 😀

Oh I take it back, that only works when the value changes, not on the initial load hmm

Ooohhh... that's a bug. Will fix!

[Rich-Harris]

This is fixed in 1.7.0. Thanks!

[ccampbell]

👍 Thanks so much for the quick turnaround. Think the version needs to be updated in the package.json here as well: https://github.com/rollup/rollup-plugin-svelte ?

[Rich-Harris]

It's a minor version, so it should be fine — rollup-plugin-svelte won't need to be updated until we reach version 2 (but you'd need to reinstall it to pick up the new version)