绑定 / 列表选择框 • Svelte Tutorial

Svelte基础绑定列表选择框

bind:value也适用于获取列表选择框的值哦

We can also use bind:value with <select> elements:

App

<select
	bind:value={selected}
	onchange={() => answer = ''}
>

至于<option>的值是个对象还是字符串，Svelte并不关心

Note that the <option> values are objects rather than strings. Svelte doesn’t mind.

这是因为我们并没有初始化selected变量，绑定的时候它的值会被自动设置为选择框的默认值（通常是列表的第一项），没绑定前selected的值都是undefined, 所以在标签里不要使用类似selected.id的操作。

Because we haven’t set an initial value of selected, the binding will set it to the default value (the first in the list) automatically. Be careful though — until the binding is initialised, selected remains undefined, so we can’t blindly reference e.g. selected.id in the template.

Edit this page on GitHub

previous next

复选框输入框组

<script>

	let questions = $state([

			id: 1,

			text: `Where did you go to school?`

},

			id: 2,

			text: `What is your mother's name?`

},

			id: 3,

			text: `What is another personal fact that an attacker could easily find with Google?`

]);

	let selected = $state();

	let answer = $state('');

	function handleSubmit(e) {

		e.preventDefault();

		alert(

			`answered question ${selected.id} (${selected.text}) with "${answer}"`

);

</script>

<h2>Insecurity questions</h2>

<form onsubmit={handleSubmit}>

	<select

		value={selected}

		onchange={() => (answer = '')}

		{#each questions as question}

			<option value={question}>

				{question.text}

			</option>

		{/each}

	</select>

	<input bind:value={answer} />

	<button disabled={!answer} type="submit">

		Submit

	</button>

</form>

<p>

	selected question {selected

		? selected.id

		: '[waiting...]'}

</p>

show text show editor