mirror of https://github.com/sveltejs/svelte
reselect <select> when the option values change (#4885)
parent
f624d6e292
commit
e34f208843
@ -0,0 +1,34 @@
|
||||
export default {
|
||||
props: {
|
||||
items: [],
|
||||
selected: 'two'
|
||||
},
|
||||
|
||||
html: `
|
||||
<select></select>
|
||||
<p>selected: two</p>
|
||||
`,
|
||||
|
||||
ssrHtml: `
|
||||
<select value="two"></select>
|
||||
<p>selected: two</p>
|
||||
`,
|
||||
|
||||
test({ assert, component, target }) {
|
||||
component.items = [ 'one', 'two', 'three' ];
|
||||
|
||||
const options = target.querySelectorAll('option');
|
||||
assert.ok(!options[0].selected);
|
||||
assert.ok(options[1].selected);
|
||||
assert.ok(!options[2].selected);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<select>
|
||||
<option value='one'>one</option>
|
||||
<option value='two'>two</option>
|
||||
<option value='three'>three</option>
|
||||
</select>
|
||||
<p>selected: two</p>
|
||||
`);
|
||||
}
|
||||
};
|
@ -0,0 +1,12 @@
|
||||
<script>
|
||||
export let selected;
|
||||
export let items;
|
||||
</script>
|
||||
|
||||
<select bind:value={selected}>
|
||||
{#each items as item}
|
||||
<option>{item}</option>
|
||||
{/each}
|
||||
</select>
|
||||
|
||||
<p>selected: {selected || 'nothing'}</p>
|
Loading…
Reference in new issue